<template>
  <div class="order wrapper_1200">
    <div class="order_header">
      <div class="condition_left">
        <div
          :class="{ 'font-color': iSdefaults == item.state }"
          @click="clickTab(item.state, item.type)"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="condition_right" v-if="iSdefaults != 6">
        <el-input v-model="searchText" placeholder="订单号/商品名称" clearable>
          <el-button slot="append" @click="getList">订单搜索</el-button>
        </el-input>
        <div class="screen_select" @click="Show" v-if="iSdefaults != 6">
          <el-button type="text" el-icon-caret-bottom>
            更多筛选条件
            <i :class="!isShow ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i>
          </el-button>
        </div>
      </div>
    </div>

    <div v-show="isShow" class="more_screen">
      <el-form
        ref="formData"
        :model="formData"
        label-width="80px"
        class="demo-form-inline"
        :inline="true"
        label-position="left"
      >
        <!-- <el-form-item label="商品分类">
          <el-select v-model="formData.region" size="small">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="下单时间">
          <el-date-picker
            size="small"
            v-model="formData.value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="订单金额" class="order_money">
          <el-input v-model="formData.Start" placeholder="最低价" size="small"></el-input
          >至
          <el-input v-model="formData.End" placeholder="最高价" size="small"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="order_table" v-show="iSdefaults != 6">
      <!-- 所有订单 -->
      <div class="evaluateBtn" v-if="iSdefaults == 4">
        <div :class="isEvaluate == 0 ? 'active' : ''" @click="evaluateShow(0)">
          待评价
        </div>
        <div :class="isEvaluate == 1 ? 'active' : ''" @click="evaluateShow(1)">
          已评价
        </div>
      </div>
      <el-table
        v-if="!isEvaluateDetail && tableData.length"
        :data="tableData"
        border
        :header-cell-style="{ background: '#FAFAFA' }"
        style="width: 100%"
      >
        <el-table-column
          prop="order_name"
          v-if="!(iSdefaults == 5)"
          label="名称"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column prop="create_time" label="创建时间" align="center" width="140">
          <template slot-scope="scope">{{
            $dayjs(scope.row.create_time * 1000).format("YYYY-MM-DD HH:mm")
          }}</template>
        </el-table-column>

        <el-table-column
          prop="order_no"
          v-if="!(iSdefaults == 5)"
          label="订单编号"
          align="center"
          width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          v-if="iSdefaults == 5"
          prop="refund_no"
          label="退款编号"
          width="160"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          v-if="iSdefaults == 5"
          prop="id"
          label="商品"
          width="320"
          align="center"
        >
          <template slot-scope="scope" v-if="iSdefaults == 5">
            <div class="commodityBox">
              <img :src="imgUrl + scope.row.sku_image" alt />
              <div class="commoditytxt">
                <p>{{ scope.row.goods_name }}</p>
                <!-- <p>
                  <span>商品编号：a0001</span>
                  <span>&nbsp;&nbsp;</span>
                  <span>规格：10g/袋</span>
                </p>
                <p>产地：北京</p>-->
                <p>
                  X
                  <span>{{ scope.row.num }}</span>
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="real_goods_money"
          label="实付金额"
          align="center"
          width="80"
          v-if="iSdefaults == 5"
        >
          <template slot-scope="scope">
            <p>￥{{ scope.row.real_goods_money }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="refund_apply_money"
          label="退款金额"
          align="center"
          width="120"
          v-if="iSdefaults == 5"
        >
          <template slot-scope="scope">
            <p>￥{{ scope.row.refund_apply_money }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="order_money"
          v-if="iSdefaults != 5"
          label="金额"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="收货人"
          align="center"
          width="180"
          v-if="iSdefaults != 5"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
            <span>&nbsp;&nbsp;</span>
            <span>{{ scope.row.mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="order_status_name"
          label="订单状态"
          v-if="!(iSdefaults == 5)"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="refund_status_name"
          label="订单状态"
          v-if="iSdefaults == 5"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="buyer_message"
          show-overflow-tooltip
          label="备注"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detail(scope.row, iSdefaults)"
              >详情</el-button
            >
            <!-- <el-button
              type="text"
              size="small"
              v-if="scope.row.order_status==-1"
              @click="del(scope.row)"
            >删除</el-button>-->
            <el-button
              type="text"
              size="small"
              v-if="scope.row.order_status == 1"
              @click="deliver(scope.row)"
              >提醒发货</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.order_status == 0"
              @click="cancelOrder(scope.row)"
              >取消订单</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="
                scope.row.order_status == 3 ||
                (scope.row.order_status == 4 && !isEvaluate)
              "
              @click="refund(scope.row)"
              >申请售后</el-button
            >
            <el-button
              type="text"
              size="small"
              v-show="
                !(scope.row.order_status == 0 || scope.row.order_status == -1) ||
                (scope.row.is_invoice == 1 && scope.row.invoice_status == 1)
              "
              @click="bill(scope.row)"
              >开票</el-button
            >
            <el-button
              v-if="scope.row.order_status == 4 && !isEvaluate"
              type="text"
              size="small"
              @click="evaluateBtn(scope.row)"
              >评价</el-button
            >

            <el-button
              v-if="iSdefaults == 5 && !scope.row.refund_status == 3"
              type="text"
              size="small"
              @click="revoke(scope.row)"
              >撤销申请</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="nothing" v-if="!isEvaluateDetail && !tableData.length">
        <img src="@/assets/images/noGoods.png" />
        暂无订单信息，去看点别的吧
      </div>

      <EvaluateDetail v-if="isEvaluateDetail" :order_id="order_id"></EvaluateDetail>

      <Page
        ref="Page"
        :total="defaultsPage.total"
        :pageSize="defaultsPage.pageSize"
        :currentPage="defaultsPage.currentPage"
        :emptyShow="false"
        @currentChange="currentChange"
      />
    </div>
    <div class="order_table" v-show="iSdefaults == 6">
      <el-table
        :data="pointTableData"
        border
        :header-cell-style="{ background: '#FAFAFA' }"
        style="width: 100%"
      >
        <el-table-column prop="create_time" label="创建时间" align="center" width="140">
          <template slot-scope="scope">{{
            $dayjs(scope.row.create_time * 1000).format("YYYY-MM-DD HH:mm")
          }}</template>
        </el-table-column>
        <el-table-column prop="order_no" label="订单号" align="center" width="180">
        </el-table-column>
        <el-table-column prop="goods_name" label="物品名称" align="center" width="140">
        </el-table-column>

        <el-table-column prop="num" label="数量" align="center" width="140">
        </el-table-column>
        <el-table-column prop="point" label="实付积分" align="center" width="140">
        </el-table-column>
        <el-table-column prop="price" label="实付余额" align="center" width="140">
        </el-table-column>
        <el-table-column prop="order_status" label="订单状态" align="center" width="140">
          <template slot-scope="scope">
            <div v-if="scope.row.type == 1">
              <div v-if="scope.row.order_status == 1">待发货</div>
              <div v-if="scope.row.order_status == 3">已发货</div>
              <div v-if="scope.row.order_status == 10">已收货</div>
            </div>
            <div v-if="scope.row.type == 2">虚拟商品</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="pointDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 删除弹窗 -->
    <Dialog ref="deldialog" :contentText="contentText" :cancelText="'返回'"></Dialog>

    <!-- 取消订单 -->
    <Dialog
      ref="cancelDialog"
      :contentText="contentText"
      @clickConfirm="cancelOrderBtn"
      :cancelText="'返回'"
    ></Dialog>
    <!-- <DialogSlot
      :dialogSlotShow.sync="cancelDialog"
      @done="reload"
      :tipsText="'取消订单'"
      :cancelText="'暂不取消'"
      :confirmText="'确认取消'"
    >
      <template v-slot:contentSlot>
        <p style="color: #ff5d5d">您确认要取消订单吗？取消订单后，订单不能恢复。</p>
        <el-form ref="cancelForm" :label-position="'top'" :model="cancelForm" label-width="80px">
          <el-form-item label="请选择取消订单原因：">
            <el-select v-model="cancelForm.region" placeholder="请选择取消理由" style="width: 100%">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </DialogSlot>-->

    <!-- 评价订单 -->
    <DialogSlot
      :dialogSlotShow.sync="evaluateDialog"
      @done="reload"
      @clickConfirm="evaluateSubmit"
      :titleShow="false"
    >
      <template v-slot:contentSlot>
        <el-form
          ref="evaluateForm"
          :label-position="'top'"
          :model="evaluateForm"
          label-width="100px"
          class="evaluateForm"
        >
          <el-form-item label="商品评价">
            <el-radio-group v-model="role">
              <el-radio
                :label="item.label"
                @change.native="getRadioRow(item)"
                v-for="(item, index) in explainList"
                :key="index"
              ></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-input
              type="textarea"
              v-model="evaluateForm.content"
              placeholder="请输入您的评价"
            ></el-input>
          </el-form-item>
          <el-form-item label="添加图片" class="evaluateUpload">
<!--            <UploadImage1-->
<!--              @input="uploadSccess($event, 'images')"-->
<!--              :limit="9"-->
<!--              :value="evaluateForm.images"-->
<!--            >-->
<!--              <template v-slot:upload>-->
<!--                <div class="upload_BOX">-->
<!--                  <div class="upload">-->
<!--                    <img src="~assets/images/downloadIMG.png" />-->
<!--                    <span>上传照片</span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </template>-->
<!--            </UploadImage1>-->
            <upload-image-oss
              @input="uploadSccess($event, 'images')"
              :limit="9"
              :value="evaluateForm.images"
            >
              <template v-slot:upload>
                <div class="upload_BOX">
                  <div class="upload">
                    <img src="~assets/images/downloadIMG.png"/>
                    <span>上传照片</span>
                  </div>
                </div>
              </template>
            </upload-image-oss>
          </el-form-item>
        </el-form>
      </template>
    </DialogSlot>

    <!-- 撤销申请 -->
    <Dialog
      ref="revokedialog"
      :contentText="contentText"
      @clickConfirm="cancelRefund"
      :cancelText="'返回'"
    ></Dialog>

    <!-- 申请开票 -->
    <Dialog
      ref="billDialog"
      :contentText="contentText"
      @clickConfirm="billBtn"
      :cancelText="'返回'"
    ></Dialog>
  </div>
</template>
<script>
import Setting from "~/setting";
import EvaluateDetail from "./evaluate_detail.vue";
import UploadImageOss from "../../pc/components/uploadImageOss";
export default {
  auth: false,
  components: {UploadImageOss, EvaluateDetail },
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      imgUrl: Setting.uplodBaseURL,
      searchText: "",
      // 所有订单分页
      defaultsPage: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      explainList: [
        { label: "好评", value: 1, scores: 5 },
        { label: "中评", value: 2, scores: 3 },
        { label: "差评", value: 3, scores: 1 },
      ],
      // 默认全部：all 待付款：waitpay 待发货：waitsend 待收货：waitconfirm 待评价：waitrate 已评价：edrate 积分商品：pointOredr
      tabList: [
        { name: "所有订单", state: 0, type: "all" },
        { name: "待付款", state: 1, type: "waitpay" },
        { name: "待发货", state: 2, type: "waitsend" },
        { name: "待收货", state: 3, type: "waitconfirm" },
        { name: "评价", state: 4, type: "waitrate" },
        { name: "退款/售后", state: 5, type: "refund" },
        { name: "积分订单", state: 6, type: "pointOredr" },
      ],
      //   默认筛选条件
      iSdefaults: 0,
      isdefaultsType: "all",
      // 评价分页
      evaluatesPage: {
        total: 30,
        pageSize: 10,
        currentPage: 2,
      },
      evaluateDialog: false,
      isEvaluate: 0,
      evaluateForm: {
        explainGrade: {},
        content: "",
        images: "",
      },
      role: "",
      isEvaluateDetail: false,

      //退款售后
      refundPage: {
        total: 30,
        pageSize: 10,
        currentPage: 2,
      },
      tableData: [],
      pointTableData: [],
      //  显示更多筛选条件下拉
      isShow: false,
      //   筛选表单
      formData: {
        value1: "",
        Start: "",
        End: "",
      },
      order_id: undefined,
      //   删除
      contentText: "确认删除?",
      //  取消订单

      cancelForm: {
        region: "",
      },
      tableRow: {},
    };
  },
  created() {
    this.getList();
  },

  methods: {
    getList() {
      console.log(this.formData);
      this.tableData = [];
      let obj = {
        order_status: this.isdefaultsType,
        page: this.defaultsPage.currentPage,
        page_size: this.defaultsPage.pageSize,
        searchText: this.searchText,
      };
      this.$axios
        .post(`/order/lists`, obj)
        .then((res) => {
          console.log(res.data, `${this.isdefaultsType}`);
          this.tableData = res.data.list;
          this.defaultsPage.total = res.data.count;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    currentChange(e) {
      this.defaultsPage.currentPage = e;
      this.getList();
    },
    getRefundList() {
      let obj = {
        refund_status: "all",
        page: this.defaultsPage.currentPage,
        page_size: this.defaultsPage.pageSize,
      };
      this.$axios
        .post(`/orderrefund/lists`, obj)
        .then((res) => {
          this.tableData = res.data.list;
          this.defaultsPage.total = res.data.count;
          console.log(this.tableData, `refund`);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    getPointList() {
      let obj = {
        page: this.defaultsPage.currentPage,
        page_size: this.defaultsPage.pageSize,
      };
      this.$axios
        .post(`/goodsexchange/getExchangeOrderList`, obj)
        .then((res) => {
          console.log(res.data.list[0], `getPointList`);
          this.pointTableData = res.data.list;
        })
        .catch((err) => {
          console.log(err, `getPointList`);
        });
    },
    // 默认全部：all 待付款：waitpay 待发货：waitsend 待收货：waitconfirm 待评价：waitrate 积分商品：pointOredr
    clickTab(status, type) {
      this.tableData = [];
      // this.defaultsPage.total = 0;
      this.iSdefaults = status;

      if (type == "all") {
        this.isdefaultsType = "all";
        this.isEvaluate = 0;
        this.getList();
      } else if (type == "waitpay") {
        this.isdefaultsType = "waitpay";
        this.isEvaluate = 0;
        this.getList();
      } else if (type == "waitsend") {
        this.isdefaultsType = "waitsend";
        this.isEvaluate = 0;
        this.getList();
      } else if (type == "waitconfirm") {
        this.isdefaultsType = "waitconfirm";
        this.isEvaluate = 0;
        this.getList();
      } else if (type == "waitrate") {
        this.isdefaultsType = "waitrate";
        this.getList();
      } else if (type == "refund") {
        this.getRefundList();
      } else if (type == "pointOredr") {
        console.log(`积分商品`);
        this.getPointList();
      }

      // 切换订单状态关闭已评价详情
      this.isEvaluateDetail = false;
    },
    Show() {
      this.isShow = !this.isShow;
    },
    // 查询详情 ——iSdefaults 判断订单详情类型  待付款1 待发货2 待收货3 评价4 退款/售后5
    detail(row, iSdefaults) {
      this.order_id = row.order_id;

      // 已评价详情
      if (iSdefaults == 4 && this.isEvaluate == 1) {
        this.isEvaluateDetail = true;
      }
      // 退款
      else if (iSdefaults == 5) {
        this.$router.push({ path: "/order/refund", query: { row } });
      } else {
        this.$router.push({
          path: "/order_details",
          query: {
            order_id: this.order_id,
          },
        });
      }
    },
    pointDetail(row) {
      console.log(row);
      this.$router.push({
        path: "/order/pointOrder",
        query: {
          order_id: row.order_id,
        },
      });
    },
    // 删除
    // del(row) {
    //   this.$refs.deldialog.dialogShow = true;
    // },
    // 提醒发货
    deliver(row) {
      console.log(row);
      let obj = {
        order_id: row.order_id,
      };
      this.$axios
        .post(`/order/doDeliveryMessage`, obj)
        .then((res) => {
          console.log(res);
          this.$message.success(res.message);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 取消订单
    cancelOrder(row) {
      this.tableRow = undefined;
      this.$refs.cancelDialog.dialogShow = true;
      this.contentText = "您确认要取消订单吗？取消订单后，订单不能恢复。";
      this.tableRow = row;
    },
    cancelOrderBtn() {
      let obj = {
        order_id: this.tableRow.order_id,
      };
      this.$axios
        .post(`/order/close`, obj)
        .then((res) => {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.getList();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    reload(e) {
      console.log(e, "0000");
    },
    // 待/已评价按钮
    evaluateShow(i) {
      this.isEvaluate = i;
      // 已评价
      if (i == 1) {
        this.isdefaultsType = "edrate";
        this.getList();
      } else {
        this.isdefaultsType = "waitrate";
        this.getList();
      }
      // 切换订单状态关闭已评价详情
      this.isEvaluateDetail = false;
    },
    // 评价订单弹出框
    evaluateBtn(row) {
      this.tableRow = undefined;
      this.evaluateDialog = true;
      this.tableRow = row;
    },
    getRadioRow(row) {
      this.evaluateForm.explainGrade = row;
    },
    //评价确定按钮
    evaluateSubmit() {
      let form = [];
      console.log(this.tableRow);
      // order_goods_id: 1, // 子订单id
      // goods_id: 1, // 商品id
      // sku_id: 1, // 商品skuid
      // sku_name: 1, // 商品sku名称
      // sku_price: 1, // 商品sku价格
      // sku_image: 1, // 商品sku图片
      // content: "评价内容", // 评价内容
      // images: "", // 商品图片  多个用英文逗号隔开
      // scores: 1, // 1-5分  备用字段：页面如不展示  好评传5  中评传3  差评传1
      // explain_type: 1 // 1好评 2中评  3差评
      form = this.tableRow.order_goods.map((item) => {
        return {
          order_goods_id: item.order_goods_id,
          goods_id: item.goods_id,
          sku_id: item.sku_id,
          sku_name: item.sku_name,
          sku_price: item.price,
          sku_image: item.sku_image,
          content: this.evaluateForm.content,
          images: this.evaluateForm.images.toString(),
          scores: this.evaluateForm.explainGrade.scores,
          explain_type: this.evaluateForm.explainGrade.value,
        };
      });
      let obj = {
        order_id: this.tableRow.order_id,
        order_no: this.tableRow.order_no,
        // member_name:this.userInfo
        // member_headimg
        is_anonymous: 0, //是否匿名 0否 1是
        goods_evaluate: form,
      };
      this.$axios
        .post(`/goodsevaluate/add`, obj)
        .then((res) => {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.getList();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 显示评价详情
    evaluateDetail(row) {},
    // 撤销退款申请弹出框
    revoke(row) {
      this.tableRow = undefined;
      this.$refs.revokedialog.dialogShow = true;
      this.contentText = "确定要撤销退款申请吗？";
      this.tableRow = row;
    },
    cancelRefund() {
      let obj = {
        order_goods_id: this.tableRow.order_goods_id,
      };
      this.$axios
        .post(`/orderrefund/cancel`, obj)
        .then((res) => {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.getRefundList();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 申请退款
    refund(row) {
      this.$router.push({
        path: "/order/refund",
        query: {
          row,
        },
      });
    },
    uploadSccess(e, key) {
      this.evaluateForm.images = e;
      console.log(e, key);
    },
    bill(row) {
      this.tableRow = undefined;
      this.contentText = "确定要申请开发票吗？";
      this.tableRow = row;
      this.$refs.billDialog.dialogShow = true;
    },
    billBtn() {
      let obj = {
        order_id: this.tableRow.order_id,
        store_id: JSON.parse(localStorage.getItem("drugstoreObj")).id,
      };
      this.$axios
        .post(`/order/doInvoice`, obj)
        .then((res) => {
          this.$message.success(res.message);
          this.getList();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.commodityBox {
  display: flex;
  img {
    width: 80px;
    height: 80px;
  }
  .commoditytxt {
    p {
      line-height: 30px;
      text-align: left;
      margin-left: 10px;
      font-size: 12px;
    }

    p:first-child {
      font-weight: 600;
      font-size: 16px;
    }
  }
}
.order {
  width: 1200px;
  min-height: 600px;
  background: #ffffff;
  border-radius: 4px;
  margin: 20px auto;
  .order_header {
    padding: 30px;
    padding-bottom: 0px;
    display: flex;
    justify-content: space-between;
    .condition_left {
      display: flex;
      div {
        cursor: pointer;
        margin-right: 40px;
        line-height: 32px;
      }
    }
    .condition_right {
      display: flex;
      /deep/ .el-input {
        height: 32px;

        .el-input__inner {
          height: 100%;
        }
        .el-input-group__append {
          color: var(--themeColor);
          border: 1px solid var(--themeColor);
          border-radius: 0;
        }
      }
      .screen_select {
        width: 120px;
        line-height: 32px;
        margin-left: 50px;
        cursor: pointer;
      }
    }
  }
  .more_screen {
    padding-left: 30px;
    padding-top: 20px;
    display: flex;
    /deep/.el-form-item {
      margin-bottom: 0;
      margin-right: 30px;
    }
    .order_money {
      /deep/.el-form-item__content {
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        line-height: 32px;
        .el-input {
          width: 120px;
          border: none;
          .el-input__inner {
            border: none;
            padding-left: 35px;
          }
        }
      }
      /deep/.el-form-item__content:hover {
        border: 1px solid var(--themeColor) !important;
      }
    }
  }
  .order_table {
    padding: 30px 30px 0px 30px;
    .evaluateBtn {
      display: flex;
      div {
        width: 72px;
        height: 29px;
        line-height: 29px;
        text-align: center;
        background: #ffffff;
        border-radius: 15px;
        border: 1px solid #d7d7d7;
        color: #999999;
        margin-right: 30px;
        margin-bottom: 15px;
        cursor: pointer;
      }
      .active {
        color: var(--themeColor);
        border: 1px solid var(--themeColor);
      }
    }
  }

  .evaluateForm {
    .evaluateUpload {
      .el-form-item__content {
        width: 100px;
        border-radius: 4px;

        .finish_room {
          margin: 0 auto;
          text-align: center;
          .finish_room2 {
            div {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .upload_BOX {
      width: 152px !important;
      height: 152px !important;
      border-radius: 4px;
      border: 1px solid #dddddd;
      text-align: center;

      .upload {
        color: #ccc;
        margin-top: 50px;
        img {
          margin: auto;
          width: 22px;
          height: 20px;
        }
      }
    }
  }
  .nothing {
    padding-top: 100px;
    padding-bottom: 150px;
    font-size: 16px;
    text-align: center;
    color: #969696;

    img {
      margin: 0 auto;
    }
  }
}
</style>
