<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" style="margin-top: -25px">
      <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="12"
              v-for="(item, i1) in surveyList"
              :key="item.title + i1"
            >
              <div class="grid-content bg-purple">
                <div class="survey-title">{{ item.title }}</div>
                <div
                  class="survey-main tc"
                  v-for="(feeList, i2) in item.feeList"
                  :key="feeList.title + i2"
                >
                  <el-badge>{{ feeList.label }}</el-badge>
                  <el-badge>
                    <!-- <countTo
                      :startVal="0"
                      :endVal="feeList.num"
                      :duration="2500"
                    ></countTo
                    > -->
                    {{ feeList.num }}{{ item.unit }}</el-badge
                  >
                </div>
              </div></el-col
            >
            <el-col
              :span="24"
              v-for="(item, i1) in orderList"
              :key="item.title + i1"
              style="margin-top: 20px"
            >
              <div class="grid-content bg-purple">
                <div class="survey-title">{{ item.title }}</div>
                <div
                  class="survey-main"
                  v-for="(feeList, i2) in item.feeList"
                  :key="feeList.title + i2"
                  :style="{ paddingTop: i2 === 0 ? '20px' : 0 }"
                >
                  <ul class="clear" style="width: 100%">
                    <li class="tc fl">
                      <el-badge style="color: #409eff">{{
                        feeList.title
                      }}</el-badge>
                    </li>
                    <li
                      class="tc fl"
                      v-for="(v1, i1) in feeList.child"
                      :key="v1 + i1"
                    >
                      <el-badge>{{ v1.label }}</el-badge>
                      <el-badge>
                        <!-- <countTo
                          :startVal="0"
                          :endVal="v1.num"
                          :duration="2500"
                        ></countTo
                        > -->
                        {{ v1.num }}{{ item.unit }}</el-badge
                      >
                    </li>
                  </ul>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
<script>
import asyncRequest from "@/apis/service/InvoiceSales/clients";
// import countTo from "vue-count-to";
import resToken from "@/mixins/resToken";
export default {
  name: "clients",
  props: ["showModel", "id", "isDetail", "name"],
  // components: { countTo },
  mixins: [resToken],
  data() {
    return {
      startVal: 0,
      endVal: 2017,
      loading: false,
      title: "企业客户财务概况",
      showModelThis: this.showModel,
      surveyList: [
        {
          title: "资金概况：",
          unit: "元",
          feeList: [
            {
              label: "未核销(确认单)：",
              num: 0,
            },
          ],
        },
        {
          title: "发票概况：",
          unit: "元",
          feeList: [
            {
              label: "已开票未核销：",
              num: 0,
            },
          ],
        },
      ],
      orderList: [
        {
          title: "销售确认单概况：",
          unit: "元",
          feeList: [
            {
              title: "资金",
              child: [
                {
                  label: "未回款：",
                  num: 0,
                },
                {
                  label: "已回未开票：",
                  num: 0,
                },
              ],
            },
            {
              title: "发票",
              child: [
                {
                  label: "未开票：",
                  num: 0,
                },
                {
                  label: "已开未回款：",
                  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.surveyList[0].feeList[0].num = 0;
      this.surveyList[1].feeList[0].num = 0;

      this.orderList[0].feeList[0].child[0].num = 0;
      this.orderList[0].feeList[0].child[1].num = 0;
      this.orderList[0].feeList[1].child[0].num = 0;
      this.orderList[0].feeList[1].child[1].num = 0;
      this.loading = true;
      await this.initData();
      this.loading = false;
    },
    async initData() {
      const res = await asyncRequest.detail({ companyNo: this.id });
      if (res && res.code === 0) {
        let data = res.data;
        if (data) {
          if (data.trade) {
            this.surveyList[0].feeList[0].num = data.trade.worder_fee
              ? data.trade.worder_fee
              : 0;
          }
          if (data.inv) {
            this.surveyList[1].feeList[0].num = data.inv.wtrade_fee
              ? data.inv.wtrade_fee
              : 0;
          }
          if (data.order) {
            this.orderList[0].feeList[0].child[0].num = data.order.wpay_fee
              ? data.order.wpay_fee
              : 0;
            this.orderList[0].feeList[0].child[1].num = data.order.trade_inv
              ? data.order.trade_inv
              : 0;
            this.orderList[0].feeList[1].child[0].num = data.order.winv_fee
              ? data.order.winv_fee
              : 0;
            this.orderList[0].feeList[1].child[1].num = data.order.inv_trade
              ? data.order.inv_trade
              : 0;
          }
        }
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      }else{
        this.$message.warning(res.message);
      }
    },
  },
};
</script>

   <style lang="scss" scoped>
.clients {
  .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;
      .survey-main {
        line-height: 50px;
        ul {
          line-height: 50px;
          li {
            line-height: 45px;
            &:first-child {
              width: 190px;
              padding-left: 90px;
            }
            &:nth-child(2),
            &:nth-child(3) {
              padding-right: 20px;
              width: calc(50% - 100px);
            }
          }
        }
      }
    }
    .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>
