<template>
  <el-row>
    <el-col :span="24">
      <invoice-head
        :newTime="newTimes"
        :oldItem="oldItem"
        :newItem="newItem"
        :ratioItem="ratioItem"
        @nextStep="nextStep"
        :isDetail="true"
        :img="img"
        :id="id"
        :payNo="payNo"
        :companyNo="companyNo"
      ></invoice-head>
      <!-- :isDetail="isDetail" -->
      <!-- "payNo", "companyNo", "isDetail" -->
    </el-col>
    <el-col :span="24">
      <el-form
        ref="ruleForm"
        v-loading="loading"
        :model="ruleForm"
        :rules="rulesThis"
        label-width="100px"
        class="demo-ruleForm clearfix"
      ></el-form>
    </el-col>
    <el-col :span="24">
      <el-form
        ref="examForm"
        :model="examForm"
        :rules="examsThis"
        label-width="90px"
        :size="'mini'"
        class="demo-examForm-view"
      >
        <el-row :gutter="10">
          <el-col :span="24">
            <el-row>
              <el-col :span="24">
                <el-table
                  :size="'mini'"
                  :data="examForm.item_list"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    prop="name"
                    label="货物或应税劳务、服务名称"
                    width="200px"
                  >
                    <template slot-scope="scope">
                      <el-input
                        :size="'mini'"
                        :class="{
                          errorInput:
                            ratioNo &&
                            ratioNo.item_list &&
                            ratioNo.item_list[scope.$index] &&
                            !ratioNo.item_list[scope.$index].name,
                        }"
                        readonly
                        v-model="scope.row.name"
                        placeholder="货物或应税劳务、服务名称"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="specification"
                    label="规格型号"
                    width="110"
                  >
                    <template slot-scope="scope">
                      <el-input
                        :size="'mini'"
                        :class="{
                          errorInput:
                            ratioNo &&
                            ratioNo.item_list &&
                            ratioNo.item_list[scope.$index] &&
                            !ratioNo.item_list[scope.$index].specification,
                        }"
                        readonly
                        v-model="scope.row.specification"
                        placeholder="规格型号"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="unit" width="70" label="单位">
                    <template slot-scope="scope">
                      <el-input
                        :size="'mini'"
                        :class="{
                          errorInput:
                            ratioNo &&
                            ratioNo.item_list &&
                            ratioNo.item_list[scope.$index] &&
                            !ratioNo.item_list[scope.$index].unit,
                        }"
                        readonly
                        v-model="scope.row.unit"
                        placeholder="单位"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="quantity" width="100" label="数量">
                    <template slot-scope="scope">
                      <el-input
                        :size="'mini'"
                        :class="{
                          errorInput:
                            ratioNo &&
                            ratioNo.item_list &&
                            ratioNo.item_list[scope.$index] &&
                            !ratioNo.item_list[scope.$index].quantity,
                        }"
                        readonly
                        v-model="scope.row.quantity"
                        placeholder="数量"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="unit_price" label="单价">
                    <template slot-scope="scope">
                      <el-input
                        :size="'mini'"
                        :class="{
                          errorInput:
                            ratioNo &&
                            ratioNo.item_list &&
                            ratioNo.item_list[scope.$index] &&
                            !ratioNo.item_list[scope.$index].unit_price,
                        }"
                        readonly
                        v-model="scope.row.unit_price"
                        placeholder="单价"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="amount" label="金额">
                    <template slot-scope="scope">
                      <el-input
                        :size="'mini'"
                        readonly
                        :class="{
                          errorInput:
                            ratioNo &&
                            ratioNo.item_list &&
                            ratioNo.item_list[scope.$index] &&
                            !ratioNo.item_list[scope.$index].amount,
                        }"
                        v-model="scope.row.amount"
                        placeholder="金额"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="tax_rate" width="80" label="税率">
                    <template slot-scope="scope">
                      <el-input
                        :class="{
                          errorInput:
                            ratioNo &&
                            ratioNo.item_list &&
                            ratioNo.item_list[scope.$index] &&
                            !ratioNo.item_list[scope.$index].tax_rate,
                        }"
                        readonly
                        :size="'mini'"
                        v-model="scope.row.tax_rate"
                        placeholder="税率"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="tax" label="税额">
                    <template slot-scope="scope">
                      <el-input
                        :size="'mini'"
                        :class="{
                          errorInput:
                            ratioNo &&
                            ratioNo.item_list &&
                            ratioNo.item_list[scope.$index] &&
                            !ratioNo.item_list[scope.$index].tax,
                        }"
                        readonly
                        v-model="scope.row.tax"
                        placeholder="税额"
                      ></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24" style="padding-top: 18px">
                <el-col :span="6"
                  ><el-form-item
                    prop="issue_date"
                    label="开票日期"
                    :class="{ errorForm: ratioNo && !ratioNo.issue_date }"
                  >
                    <el-input
                      v-model="examForm.issue_date"
                      placeholder="开票日期"
                      readonly
                    ></el-input> </el-form-item
                ></el-col>
                <el-col :span="6">
                  <el-form-item
                    prop="subtotal_amount"
                    label="合计金额"
                    :class="{ errorForm: ratioNo && !ratioNo.subtotal_amount }"
                  >
                    <el-input
                      readonly
                      v-model="examForm.subtotal_amount"
                      placeholder="合计金额"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    prop="subtotal_tax"
                    label="合计税额"
                    :class="{ errorForm: ratioNo && !ratioNo.subtotal_tax }"
                  >
                    <el-input
                      readonly
                      v-model="examForm.subtotal_tax"
                      placeholder="合计税额"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    prop="total"
                    label="价税合计"
                    :class="{ errorForm: ratioNo && !ratioNo.total }"
                  >
                    <el-input
                      readonly
                      v-model="examForm.total"
                      placeholder="价税合计"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
    <el-col :span="24" style="text-align: right">
      <el-col :span="8">
        <img
          v-viewer
          style="width: 80px; heigth: 52px"
          class="fl"
          v-if="
            oldresList &&
            oldresList.list &&
            oldresList.list[activeImg] &&
            oldresList.list[activeImg].image
          "
          :src="oldresList.list[activeImg].image"
          alt=""
        />
        <el-tag class="fl" style="margin: 0 0 0 5px"
          >共{{ length }}张发票，当前第{{ activeImg + 1 }}张</el-tag
        >
      </el-col>
      <el-col :span="16" v-if="isDetail === '033'" style="text-align: right">
        <el-button-group v-if="oldresList.list.length > 1">
          <el-button
            type="primary"
            :disabled="activeImg === 0"
            @click="carouselChange(--activeImg)"
            icon="el-icon-arrow-left"
            >上一张</el-button
          >
          <el-button
            type="primary"
            :disabled="activeImg + 1 == oldresList.list.length"
            @click="carouselChange(++activeImg)"
            >下一张<i class="el-icon-arrow-right el-icon--right"></i
          ></el-button>
        </el-button-group>
      </el-col>
      <el-col :span="16" v-else>
        <el-form
          ref="examineForm"
          :model="examineForm"
          :rules="examineFormThis"
          label-width="60px"
          size="mini"
          class="demo-examineForm"
        >
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item prop="invtime" label="时间">
                <el-date-picker
                  style="width: 100%"
                  class="fl"
                  v-model="examineForm.invtime"
                  type="datetime"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="发票审核时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="审核" prop="status">
                <el-select
                  v-model="examineForm.status"
                  style="width: 100%"
                  placeholder="请选择审核状态"
                  @change="changeS"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" style="text-align: right">
              <el-button type="primary" size="mini" @click="submitForm"
                >提交审核结果</el-button
              >
            </el-col>
            <el-col :span="24" v-if="examineForm.status === '4'">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="examineForm.remark"
                  type="textarea"
                  :rows="3"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-col>
  </el-row>
</template>
<script>
import asyncRequest from "@/apis/service/purchase/orderRecord";
import InvoiceHead from "@/views/purchase/orderRecord/components/InvoiceHead";
import resToken from "@/mixins/resToken";
export default {
  name: "orderRecord",
  props: ["id", "newTime", "payNo", "companyNo", "isDetail"],
  components: {
    InvoiceHead,
  },
  mixins: [resToken],
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          if (time) {
            return time.getTime() >= new Date().valueOf();
          }
        },
      },
      newTimes: null,
      examineForm: {
        invid: this.id,
        status: "0",
        remark: "",
        invtime: "",
      },
      activeForm: 0,
      oldItem: {
        buyer_address: "",
        buyer_bank: "",
        buyer_id: "",
        buyer_name: "",
        seller_address: "",
        seller_bank: "",
        seller_id: "",
        seller_name: "",
      },
      newItem: {
        buyer_address: "",
        buyer_bank: "",
        buyer_id: "",
        buyer_name: "",
        seller_address: "",
        seller_bank: "",
        seller_id: "",
        seller_name: "",
      },
      ratioItem: {
        buyer_address: true,
        buyer_bank: true,
        buyer_id: true,
        buyer_name: true,
        seller_address: true,
        seller_bank: true,
        seller_id: true,
        seller_name: true,
      },
      length: 0,
      oldresList: {
        buyer: {},
        seller: {},
        list: [],
      },
      resList: {
        buyer: {},
        seller: {},
        list: [],
      },
      ratioresList: {
        buyer: {},
        seller: {},
        list: [],
      },
      ratioNo: {
        id: "",
        item_list: [],
        issue_date: true,
        subtotal_amount: true,
        subtotal_tax: true,
        total: true,
      },
      options: [
        {
          value: "0",
          label: "通过",
        },
        {
          value: "4",
          label: "驳回",
        },
      ],
      examineFormThis: {
        status: [
          { required: true, message: "请选择审核状态", trigger: "change" },
        ],
        remark: [
          { required: false, message: "请输入价税合计", trigger: "blur" },
        ],
        invtime: [
          { required: true, message: "请选择发票审核时间", trigger: "change" },
        ],
      },
      examForm: {
        id: "",
        item_list: [],
        issue_date: "",
        subtotal_amount: "",
        subtotal_tax: "",
        total: "",
      },
      examsThis: this.exams,
      activeImg: 0,
      exams: {
        item_list: [],
        issue_date: [
          { required: true, message: "请输入开票日期", trigger: "blur" },
        ],
        subtotal_amount: [
          { required: true, message: "请输入合计金额", trigger: "blur" },
        ],
        subtotal_tax: [
          { required: true, message: "请输入合计税额", trigger: "blur" },
        ],
        total: [{ required: true, message: "请输入价税合计", trigger: "blur" }],
      },
    };
  },

  watch: {
    newTime: function (old, val) {
      if (old !== val) {
        this.initForm();
      }
    },
  },
  mounted() {
    this.initForm();
  },
  methods: {
    changeS(val) {
      if (val === "4") {
        this.examineFormThis.remark[0].required = true;
      } else {
        this.examineFormThis.remark[0].required = false;
      }
    },
    async initForm() {
      console.log(this.companyNo);
      console.log(this.id, this.newTime, this.payNo, this.companyNo);
      // console.log(this.payNo);
      this.loading = true;
      this.examsThis = this.exams;
      await this.getData();
      await this.initData();
    },

    async resetForm(val) {
      this.newTimes = new Date().valueOf();
      console.log(this.newTimes);
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.examForm) {
          this.$refs.examForm.resetFields();
          this.$refs.examForm.clearValidate();
          this.setKey(
            this.resList.buyer,
            this.oldresList.buyer,
            this.ratioresList.buyer
          );
          this.setKey(
            this.resList.seller,
            this.oldresList.seller,
            this.ratioresList.seller
          );
          this.setNewKey(val);
          console.log(this.ratioNo);
        }
      });
      this.loading = false;
    },
    setKey(keyObj1, keyObj2, keyObj3) {
      for (let k in keyObj1) {
        this.newItem[k] = JSON.parse(JSON.stringify(keyObj1[k]));
      }
      for (let k in keyObj2) {
        this.oldItem[k] = JSON.parse(JSON.stringify(keyObj2[k]));
      }
      for (let k in keyObj3) {
        this.ratioItem[k] = JSON.parse(JSON.stringify(keyObj3[k]));
      }
    },
    setNewKey(val) {
      let item = JSON.parse(JSON.stringify(this.resList.list[val]));
      for (let k in item) {
        if (k === "goods") {
          this.examForm["item_list"] = JSON.parse(JSON.stringify(item[k]));
        } else {
          this.examForm[k] = JSON.parse(JSON.stringify(item[k]));
        }
      }

      let model = JSON.parse(JSON.stringify(this.ratioresList.list[val]));
      for (let k in model) {
        if (k === "goods") {
          this.ratioNo["item_list"] = JSON.parse(JSON.stringify(model[k]));
        } else {
          this.ratioNo[k] = JSON.parse(JSON.stringify(model[k]));
        }
      }

      this.examineForm.invtime =
        this.examineForm.invtime === ""
          ? this.transformTime(new Date())
          : this.examineForm.invtime;
      console.log(this.examineForm);
    },
    transformTime(tTime) {
      // console.log(tTime);
      let time = new Date(tTime);
      // console.log(time);
      let y = this.setNum(time.getFullYear());
      let M = this.setNum(time.getMonth() + 1);
      let d = this.setNum(time.getDate());
      let H = this.setNum(time.getHours());
      let m = this.setNum(time.getMinutes());
      let s = this.setNum(time.getSeconds());
      return `${y}-${M}-${d} ${H}:${m}:${s}`;
    },
    setNum(num) {
      return num < 10 ? `0${num}` : num + "";
    },
    async getData() {
      console.log(this.companyNo);
      const res = await asyncRequest.companydetail({
        companyNo: this.companyNo,
        sid: this.id,
      });
      if (res && res.code === 0) {
        const data = res.data || [];
        this.oldresList = {
          buyer: {},
          seller: {},
          list: [],
        };
        this.oldresList.buyer = {
          buyer_address: data.company_address + data.mobile,
          buyer_bank: data.bank_name + data.bankNo,
          buyer_id: data.company_license,
          buyer_name: data.company_name,
        };
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },
    async initData() {
      (this.oldresList.list = []),
        (this.resList = {
          buyer: {},
          seller: {},
          list: [],
        });
      this.ratioresList = {
        buyer: {},
        seller: {},
        list: [],
      };
      const res = await asyncRequest.invoiceinfo({ sid: this.id });
      if (
        res &&
        res.code === 0 &&
        res.data &&
        res.data.invoice &&
        res.data.invoice.length > 0
      ) {
        const data = res.data || [];

        this.oldresList.seller = {
          seller_address: data.old.seller_address,
          seller_bank: data.old.seller_bank,
          seller_id: data.old.seller_id,
          seller_name: data.old.seller_name,
        };
        this.resList.buyer = {
          buyer_address: data.buyer.buyer_address,
          buyer_bank: data.buyer.buyer_bank,
          buyer_id: data.buyer.buyer_id,
          buyer_name: data.buyer.buyer_name,
        };
        this.resList.seller = {
          seller_address: data.seller.seller_address,
          seller_bank: data.seller.seller_bank,
          seller_id: data.seller.seller_id,
          seller_name: data.seller.seller_name,
        };
        data.invoice.forEach((v1, i1) => {
          // console.log(v1);
          let x = {
            // bstatus: v1.bstatus,
            id: v1.id,
            image: v1.image,
            issue_date: v1.issue_date,
            status: v1.status,
            payid: v1.payid,
            subtotal_amount: v1.subtotal_amount,
            subtotal_tax: v1.subtotal_tax,
            total: v1.total,
            goods: v1.item_list,
          };
          let y = {
            // bstatus: v1.bstatus,
            id: v1.id,
            image: v1.image,
            issue_date: v1.invoice_info.issue_date,
            status: v1.status,
            payid: v1.payid,
            subtotal_amount: v1.invoice_info.subtotal_amount,
            subtotal_tax: v1.invoice_info.subtotal_tax,
            total: v1.invoice_info.total,
            goods: v1.invoice_info.item_list,
          };
          this.oldresList.list.push(y);
          this.resList.list.push(x);
        });
        for (let q in this.oldresList.seller) {
          this.ratioresList.seller[q] =
            this.oldresList.seller[q] === this.resList.seller[q];
        }
        for (let w in this.oldresList.buyer) {
          this.ratioresList.buyer[w] =
            this.oldresList.buyer[w] === this.resList.buyer[w];
        }
        this.length = this.oldresList.list.length;

        this.oldresList.list.forEach((v2, i2) => {
          // console.log(v2);
          // console.log(v2, i2);
          let model = Object.assign({}, {});

          for (let e in v2) {
            if (e === "goods") {
              model[e] = [];
              let myOldresList = JSON.parse(
                JSON.stringify(this.oldresList.list[i2][e])
              );
              let myresList = JSON.parse(
                JSON.stringify(this.resList.list[i2][e])
              );
              let difference = myresList.length - myOldresList.length;
              // console.log(difference, Math.abs(difference));
              if (difference !== 0) {
                for (let is = 0; is < Math.abs(difference); is++) {
                  console.log(is);
                  let myItem = this.setItem();
                  if (difference < 0) {
                    myresList.push(myItem);
                  } else {
                    myOldresList.push(myItem);
                  }
                }
                // console.log(myOldresList);
                // console.log(myresList);
              }
              // console.log(myresList.length - myOldresList.length);
              myOldresList.forEach((v3, i3) => {
                let item = Object.assign({}, {});
                for (let r in v3) {
                  item[r] = myOldresList[i3][r] === myresList[i3][r];
                }
                model[e].push(item);
              });
            } else {
              model[e] =
                this.oldresList.list[i2][e] === this.resList.list[i2][e];
            }
          }
          this.ratioresList.list.push(model);
        });

        this.activeImg = 0;
        await this.carouselChange(0);
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },
    setItem() {
      return {
        amount: "",
        name: "",
        quantity: "",
        specification: "",
        tax: "",
        tax_rate: "",
        unit: "",
        unit_price: "",
      };
    },
    sitDeta(obj) {
      for (let key in obj) {
        if (Array.isArray(obj[key])) {
        } else {
          obj[key] += "";
        }
      }
      return obj;
    },
    async carouselChange(val) {
      this.activeImg = val;
      if (this.resList.list.length > 0 && val < this.resList.list.length) {
        await this.resetForm(val);
      }
    },
    async submitForm() {
      await this.$refs.examineForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const obj = JSON.parse(JSON.stringify(this.examineForm));
          obj.invid = this.examForm.id;
          console.log(obj);
          if (obj.status === "4") {
            await this.setstatus(obj);
          } else {
            await this.lastOne();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async setstatus(obj) {
      let res = await asyncRequest.invoicestatus(obj);
      if (res && res.code === 0) {
        await this.lastOne();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },
    async lastOne() {
      this.loading = false;
      if (this.activeImg + 1 == this.length) {
        await this.invoiceexam();
      } else {
        await this.carouselChange(++this.activeImg);
      }
    },

    async invoiceexam() {
      this.loading = true;
      let res = await asyncRequest.invoiceexam({
        sid: this.id,
        invtime: this.examineForm.invtime,
      });
      if (res && res.code === 0) {
        const title = "审核发票提交成功！";
        this.$notify.success({
          title,
          message: "",
        });
        this.showModelThis = false;
        // 刷新
        this.$emit("refreshAll");
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
      this.loading = false;
    },
    async ValidationList(list) {
      let isOK = true;
      list.forEach((v1) => {
        for (let v2 in v1) {
          if (v1[v2] === "") {
            isOK = false;
          }
        }
      });
      return isOK;
    },
    async detectionField(obj, active) {
      let modal = {
        buyer_address: JSON.parse(
          JSON.stringify(this.oldresList.buyer.buyer_address)
        ),
        buyer_bank: JSON.parse(
          JSON.stringify(this.oldresList.buyer.buyer_bank)
        ),
        buyer_id: JSON.parse(JSON.stringify(this.oldresList.buyer.buyer_id)),
        buyer_name: JSON.parse(
          JSON.stringify(this.oldresList.buyer.buyer_name)
        ),
        seller_address: JSON.parse(
          JSON.stringify(this.oldresList.seller.seller_address)
        ),
        seller_bank: JSON.parse(
          JSON.stringify(this.oldresList.seller.seller_bank)
        ),
        seller_id: JSON.parse(JSON.stringify(this.oldresList.seller.seller_id)),
        seller_name: JSON.parse(
          JSON.stringify(this.oldresList.seller.seller_name)
        ),
        item_list: JSON.parse(
          JSON.stringify(this.oldresList.list[active].goods)
        ),
        issue_date: JSON.parse(
          JSON.stringify(this.oldresList.list[active].issue_date)
        ),
        subtotal_amount: JSON.parse(
          JSON.stringify(this.oldresList.list[active].subtotal_amount)
        ),
        subtotal_tax: JSON.parse(
          JSON.stringify(this.oldresList.list[active].subtotal_tax)
        ),
        total: JSON.parse(JSON.stringify(this.oldresList.list[active].total)),
      };

      // console.log(obj);
      // console.log(modal);
      // console.log(this.resList[0]);
      let arr = [];
      for (let i in obj) {
        if (i !== "item_list") {
          if (obj[i] !== modal[i]) {
            arr.push(i);
          }
        } else {
          console.log(i);
          let isok = true;

          for (let x = 0; x < obj.item_list.length; x++) {
            for (let y in obj.item_list[x]) {
              if (modal.item_list[x]) {
                if (obj.item_list[x][y] !== modal.item_list[x][y]) {
                  isok = false;
                }
              }
            }
          }
          if (!isok) {
            arr.push("item_list");
          }
        }
      }
      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
        // console.log(obj[arr[i]]);
        // console.log(modal[arr[i]]);
      }

      let item = JSON.parse(JSON.stringify(obj));

      item.field = arr.join(",");
      item.id = JSON.parse(JSON.stringify(this.oldresList.list[active].id));
      return item;
    },
  },
};
</script>

   <style lang="scss" scoped>
.orderRecord {
  .setWidth {
    width: 100% !important;
    // display: flex;
    // display: block !important;
    // .el-input__inner {
    //   display: flex;
    //   width: 1000px !important;
    //   display: block !important;
    // }
  }
  .imgrq {
    max-width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 12px;
    li {
      width: 80px;
      height: 52px;
      border: 2px solid transparent;
      &.active {
        border: 2px solid #63cbe7;
      }
      img {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .buy-title {
    display: flex;
    text-align: center;
    align-items: flex-end;
    padding-bottom: 20px;
    > div {
      width: 100%;
      display: block;
      font-size: 17px;
      font-family: "Microsoft Yahei", sans-serif;
      color: #606266;
      font-weight: 700;
    }
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .scale {
    li {
      height: 40px;
      line-height: 40px;
      &.fuhao {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        i {
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          color: #97a8be;
          font-size: 20px;
        }

        &.dengyu {
          i {
            // font-size: 26px;
            transform: rotate(90deg);
            -ms-transform: rotate(90deg); /* IE 9 */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
            -o-transform: rotate(90deg);
          }
        }
      }
      .Addend {
        i.fuhao-i {
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          color: #97a8be;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
