<template>
  <div class="filingDetail">
    <div class="filingDetail-main" v-if="powers.some((i) => i == '007')">
      <el-tabs v-model="projectTabs" v-loading="loading">
        <el-tab-pane label="报备单详情" name="1">
          <el-collapse v-model="activeNames" style="margin: -18px 0 0 0">
            <el-collapse-item :title="'报备单详情'" name="1">
              <show-data-table
                style="padding: -5px 0 10px 0"
                :newTime="newTime"
                v-if="newTime !== ''"
                :sitem="sitem"
                :columns="editColumns"
              >
                <template slot="status">
                  <el-tag
                    :size="tablebtnSize"
                    :type="
                      (statusList.find((item) => item.id == sitem.status) || {}).type ||
                      ''
                    "
                    v-text="
                      (statusList.find((item) => item.id == sitem.status) || {}).label ||
                      '--'
                    "
                  ></el-tag>
                </template>

                <template slot="supplierName">
                  <span>{{ sitem.supplierName }}</span>
                  <el-popover placement="top" width="300" trigger="hover">
                    <ul>
                      <li>
                        <span>供应商编号：</span><span>{{ sitem.supplierNo }}</span>
                      </li>
                    </ul>
                    <i class="el-icon-warning-outline fr" slot="reference"></i>
                  </el-popover>
                </template>
                <template slot="customerName">
                  <span>{{ sitem.customerName }}</span>
                  <el-popover placement="top" width="300" trigger="hover">
                    <ul>
                      <li>
                        <span>业务公司编号：</span><span>{{ sitem.customerNo }}</span>
                      </li>
                    </ul>
                    <i class="el-icon-warning-outline fr" slot="reference"></i>
                  </el-popover>
                </template>
                <template slot="companyName">
                  <span>{{ sitem.companyName }}</span>
                  <el-popover
                    placement="top"
                    width="300"
                    trigger="hover"
                    v-if="sitem.companyCode"
                  >
                    <ul>
                      <li>
                        <span>企业客户编号：</span><span>{{ sitem.companyCode }}</span>
                      </li>
                    </ul>
                    <i class="el-icon-warning-outline fr" slot="reference"></i>
                  </el-popover>
                </template>

                <template slot="is_determine_price">
                  <el-tag
                    :size="'mini'"
                    v-text="
                      (
                        is_determine_price_options.find(
                          (item) => item.id == sitem.is_determine_price + ''
                        ) || {}
                      ).label || '--'
                    "
                  ></el-tag>
                </template>
              </show-data-table>
            </el-collapse-item>
            <el-collapse-item title="商品信息" name="20">
              <show-data-table
                :newTime="newTime"
                v-if="newTime !== ''"
                :columns="coveColumns"
                :sitem="sitem"
              >
                <template slot="good_name">
                  <span>{{ sitem.good_name }}</span>
                  <span v-for="(si, i) in sitem.specinfo" :key="si.spec_id + i">
                    <span v-if="i !== 0">-</span>
                    <span v-else>_</span>
                    <span>{{ si.spec_name }}[{{ si.spec_value_name }}]</span>
                  </span>
                  <el-popover
                    v-if="sitem.spuCode"
                    placement="top"
                    width="300"
                    trigger="hover"
                  >
                    <ul>
                      <li>
                        <span>商品编号：</span><span>{{ sitem.spuCode }}</span>
                      </li>
                    </ul>
                    <i class="el-icon-warning-outline fr" slot="reference"></i>
                  </el-popover>
                </template>

                <template slot="send_way">
                  <span>{{ sitem.send_way + '' === "1" ? "供应商包邮" : "公司自提" }}</span>
                </template>

                <template slot="good_type">
                  <el-tag
                    :size="'mini'"
                    v-text="
                      (options1.find((item) => item.id == sitem.good_type) || {}).name ||
                      '--'
                    "
                  />
                  <span v-if="sitem.good_type + '' === '1'" style="padding: 0 0 0 5px"
                    >{{ sitem.moq }}起订/工期{{ sitem.customized }}天</span
                  >
                </template>
                <template slot="supply_area">
                  <el-tag
                    :size="'mini'"
                    v-text="
                      (options6.find((item) => item.id === sitem.supply_area) || {})
                        .name || '--'
                    "
                  ></el-tag>
                </template>

                <template slot="pay_way">
                  <el-tag
                    :size="'mini'"
                    v-text="
                      (options13.find((item) => item.id == sitem.pay_way) || {}).name ||
                      '--'
                    "
                  />
                </template>
                <template slot="noble">
                  <span v-if="sitem.noble_name"
                    >{{ sitem.noble_weight ? sitem.noble_weight : "0" }}g-{{
                      sitem.noble_name
                    }}-{{ sitem.gold_price ? sitem.gold_price : "0" }}元/g-{{
                      sitem.is_gold_price + '' === "0" ? "不" : ""
                    }}启用实时金价-{{ sitem.is_diff === "1" ? "有" : "无" }}工差-{{
                      sitem.config
                    }}-{{ sitem.other_config }}</span
                  >
                  <span v-else>--</span>
                </template>
                <template slot="good_img">
                  <img
                    v-viewer
                    style="width: 23px; height: 23px; margin: 0 5px 0 0"
                    class="fl"
                    v-for="(si, sii) in sitem.good_img"
                    :key="si + sii"
                    :src="si"
                    alt=""
                  /> </template
              ></show-data-table>
            </el-collapse-item>

            <el-collapse-item
              title="审批"
              name="2"
              v-if="(status == '0' || status == '2') && powers.some((i) => i == '043')"
            >
              <exam-forms
                :newTime="newTime"
                v-if="newTime !== ''"
                :sitem="this.sitem"
                @searchChange="examFormSubmit($event, '')"
              />
            </el-collapse-item>
            <el-collapse-item
              title="收货地址"
              name="3"
              v-if="this.status + '' === '3' || this.status + '' === '4'"
            >
              <order-out-table
                :newTime="newTime"
                v-if="newTime !== ''"
                :id="sitem.orderCode"
              />
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="审批记录" name="3">
          <process-time-line
            v-if="newTime !== ''"
            :newTime="newTime"
            :type="'YJD'"
            :orderCode="queryId"
          />
        </el-tab-pane>

        <!-- <el-tab-pane label="流程图" name="5">
          <flow-chart process_id="13" :orderCode="queryId" />
        </el-tab-pane> -->
      </el-tabs>
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
<script>
// import examForms from "./exam-form.vue";
import asyncRequest from "@/apis/service/sellOut/filing";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import orderOutTable from "./order-out-table";
import {
  editColumns,
  costArr,
  bargainingArr,
  options1,
  options2,
  options3,
  options4,
  options5,
  options6,
  options7,
  options8,
  options9,
  options10,
  options11,
  options12,
  options13,
  statusList,
  rate_status_options,
  coveColumns,
  is_determine_price_options,
} from "./columns";
export default {
  components: {
    examForms,
    orderOutTable,
  },
  name: "filingDetail",
  mixins: [resToken],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size", "private_field"]),
    powers() {
      const tran =
        this.$store.getters.btnList.find((item) => item.menu_route == "filingDetail") ||
        {};
      const { action } = tran ?? {};
      return action ?? [];
    },
    // ppowers() {
    //   const tran =
    //     this.$store.getters.roleProcess.find((i) => i.process_type === "YJD") || {};
    //   const { action } = tran ?? {};
    //   return action ?? [];
    // },
  },

  data() {
    return {
      size: "small",
      eaxmList: [],
      costArr,
      bargainingArr,
      editColumns,
      options1,
      options2,
      options3,
      options4,
      options5,
      options6,
      options7,
      options8,
      options9,
      options10,
      options11,
      options12,
      options13,
      statusList,
      rate_status_options,
      is_determine_price_options,
      coveColumns,
      projectTabs: "1",
      activeNames: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "20"],
      newTime: "",
      loading: false,
      queryType: "",
      queryId: "",
      status: "",
      sitem: null,

      orderItem: {},
      moneyDirItem: {},
      moneyItem: {},
      BossItem: {},
    };
  },
  mounted() {
    // this.initForm();
  },
  methods: {
    async initForm() {
      const { id, type } = this.$route.query;
      this.queryId = id;
      this.queryType = type;
      this.projectTabs = "1";
      this.loading = true;
      await this.initData();
      this.loading = false;
    },

    handleClick(row) {
      console.log(row);
    },
    async refresh() {
      this.routeReGoto("filing", {});
    },
    async initData() {
      this.loading = true;
      const { code, message, data } = await asyncRequest.detail({
        id: this.queryId,
      });

      this.eaxmList = [];
      this.loading = false;
      if (code === 0) {
        this.sitem = JSON.parse(JSON.stringify(data));
        const { cat_info } = this.sitem;
        let cat = "";
        if (cat_info && cat_info.length > 0) {
          cat_info.forEach((e, i) => {
            cat += i === 0 ? e.name : "_" + e.name;
          });
        }
        this.sitem.cat = cat;
        // this.sitem.good_img = this.sitem.good_img.split(",");

        const { status } = this.sitem;
        this.status = status;

        this.getNewTime();
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },

    // 点击业务审核的保存按钮

    async examFormSubmit(e, title) {
      if (!this.loading) {
        await this.$confirm(`确定要提交${title}审批结果？`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            this.loading = true;
            await this.statusSubmit(e, title);
          })
          .catch(() => {
            this.loading = false;
            console.log("取消");
          });
      }
    },
    async statusSubmit(e, title) {
      let model = JSON.parse(JSON.stringify(e));
      model.companyCode = model.companyCode[0];
      const { code, data, message } = await asyncRequest.status(model);
      this.loading = false;
      // console.log("res", data);
      if (code === 0) {
        this.$notify.success({
          title: "审核提交" + "成功！",
          message: "",
        });
        await this.initForm();
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.filingDetail {
  position: relative;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  .filingDetail-main {
    position: relative;
    padding: 10px;
    height: 100%;
    width: 100%;
  }
  .filingDetail-title {
    border-top: 1px solid #ebeef5;
    span {
      height: 50px;
      line-height: 50px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16fpx;
      text-align: left;
    }
  }
  /deep/ .ddiv {
    border-top: 1px solid #dcdfe6;
  }
  /deep/ .dtitle {
    width: 40px;
    text-align: center;
    height: 100%;
    min-height: 100%;
    ul {
      padding: 12px 0 0 0;
    }
  }
  /deep/ .dmain {
    padding: 20px 0 0 0;
    width: calc(100% - 40px);
    border-left: 1px solid #dcdfe6;
  }
}
</style>
