<template>
  <el-dialog
    v-loading="loading"
    :title="title"
    :center="true"
    align="left"
    top="15vh"
    width="900px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @close="closeModel"
  >
    <el-card class="add">
      <el-row :gutter="40">
        <el-col :span="24" style="padding: 0 0 12px 0">
          <el-col v-if="name" :span="12"
            ><span>公司名称：</span><span>{{ name }}</span>
          </el-col>
          <el-col :span="12" v-if="contector">
            <span>联系人：</span><span>{{ contector }}</span></el-col
          >
        </el-col>
        <el-col :span="24">
          <el-row :gutter="20">
            <el-col
              :span="i1 === 2 ? 24 : 12"
              v-for="(item, i1) in surveyList"
              :key="item.title + i1"
              :style="{ marginTop: i1 === 2 ? '20px' : 0 }"
            >
              <div class="grid-content bg-purple">
                <div class="survey-title">{{ item.title }}</div>
                <div
                  class="survey-main"
                  v-for="(purchaseSupplier, i2) in item.purchaseSupplier"
                  :key="purchaseSupplier.title + i2"
                >
                  <el-row :gutter="20">
                    <el-col
                      :span="i1 === 2 ? 12 : 24"
                      v-for="(child, i3) in purchaseSupplier.child"
                      :key="child.label + i3"
                      class="lh40 tc"
                    >
                      <span>{{ child.label }}</span
                      ><span>
                        <!-- <countTo
                          :startVal="0"
                          :endVal="child.num"
                          :duration="2500"
                        ></countTo
                        > -->

                        {{ child.num }}{{ item.unit }}</span
                      >
                    </el-col>
                  </el-row>
                </div>
              </div></el-col
            >
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
<script>
import asyncRequest from "@/apis/service/purchase/supplierPay";
// import countTo from "vue-count-to";
import resToken from "@/mixins/resToken";
export default {
  name: "supplierPay",
  props: ["showModel", "id", "isDetail", "name", "contector"],
  // components: { countTo },
  mixins: [resToken],
  data() {
    return {
      startVal: 0,
      endVal: 2017,
      loading: false,
      title: "供应商财务概况",
      showModelThis: this.showModel,
      resData: {
        payment: {
          already: 0,
          wait: 0,
        },
        invoice: { already: 0, wait: 0 },
      },
      surveyList: [
        {
          title: "款项概况：",
          unit: "元",
          purchaseSupplier: [
            {
              title: "",
              child: [
                {
                  label: "已付：",
                  num:
                    this.resData &&
                    this.resData.payment &&
                    this.resData.payment.already &&
                    this.resData.payment.already.total
                      ? this.resData.payment.already.total
                      : 0,
                },
                {
                  label: "未付：",
                  num:
                    this.resData &&
                    this.resData.payment &&
                    this.resData.payment.wait &&
                    this.resData.payment.wait.total
                      ? this.resData.payment.wait.total
                      : 0,
                },
              ],
            },
          ],
        },
        {
          title: "发票概况：",
          unit: "元",
          purchaseSupplier: [
            {
              title: "",
              child: [
                {
                  label: "已核销：",
                  num:
                    this.resData &&
                    this.resData.invoice &&
                    this.resData.invoice.already &&
                    this.resData.invoice.already.total
                      ? this.resData.invoice.already.total
                      : 0,
                },
                {
                  label: "未核销：",
                  num:
                    this.resData &&
                    this.resData.invoice &&
                    this.resData.invoice.wait &&
                    this.resData.invoice.wait.total
                      ? this.resData.invoice.wait.total
                      : 0,
                },
              ],
            },
          ],
        },
        {
          title: "采购单概况：",
          unit: "单",
          purchaseSupplier: [
            {
              title: "款项：",
              child: [
                {
                  label: "已付：",
                  num:
                    this.resData &&
                    this.resData.payment &&
                    this.resData.payment.already &&
                    this.resData.payment.already.num
                      ? this.resData.payment.already.num
                      : 0,
                },
                {
                  label: "未付：",
                  num:
                    this.resData &&
                    this.resData.payment &&
                    this.resData.payment.wait &&
                    this.resData.payment.wait.num
                      ? this.resData.payment.wait.num
                      : 0,
                },
              ],
            },
            {
              title: "款项：",
              child: [
                {
                  label: "已核销：",
                  num:
                    this.resData &&
                    this.resData.invoice &&
                    this.resData.invoice.already &&
                    this.resData.invoice.already.num
                      ? this.resData.invoice.already.num
                      : 0,
                },
                {
                  label: "未核销：",
                  num:
                    this.resData &&
                    this.resData.invoice &&
                    this.resData.invoice.wait &&
                    this.resData.invoice.wait.num
                      ? this.resData.invoice.wait.num
                      : 0,
                },
              ],
            },
          ],
        },
      ],
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  methods: {
    closeModel() {
      console.log("closeModel!!");
    },
    async initForm() {
      this.loading = true;
      await this.initData();
      this.loading = false;
    },
    async initData() {
      console.log(this.id + "1234567890-");
      const res = await asyncRequest.detail({ id: this.id });
      if (res && res.code === 0) {
        this.resData = res.data;
        this.surveyList[0].purchaseSupplier[0].child[0].num =
          this.resData.payment.already.total;
        this.surveyList[0].purchaseSupplier[0].child[1].num =
          this.resData.payment.wait.total;
        this.surveyList[1].purchaseSupplier[0].child[0].num =
          this.resData.invoice.already.total;
        this.surveyList[1].purchaseSupplier[0].child[1].num =
          this.resData.invoice.wait.total;

        this.surveyList[2].purchaseSupplier[0].child[0].num =
          this.resData.payment.already.num;
        this.surveyList[2].purchaseSupplier[1].child[0].num =
          this.resData.invoice.already.num;
        this.surveyList[2].purchaseSupplier[0].child[1].num =
          this.resData.payment.wait.num;
        this.surveyList[2].purchaseSupplier[1].child[1].num =
          this.resData.invoice.wait.num;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      }else{
        this.$message.warning(res.message);
      }
    },
  },
};
</script>

   <style lang="scss" scoped>
.supplierPay {
  .add {
    .survey-title {
      line-height: 35px;
      font-size: 18px;
      font-weight: bold;
    }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .lh40 {
      line-height: 40px;
      font-size: 16px;
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
      padding: 30px;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }
  .setWidth {
    width: 100% !important;
    // display: flex;
    // display: block !important;
    // .el-input__inner {
    //   display: flex;
    //   width: 1000px !important;
    //   display: block !important;
    // }
  }
}
</style>
