<template>
  <div class="business-container">
    <ElTabs>
      <ElTabPane label="新建业务报备" v-if="isAdd">
        <CreateBusinessForm />
      </ElTabPane>

      <template v-else>
        <ElTabPane label="业务报备详情">
          <ElCollapse v-model="actives">
            <ElCollapseItem title="业务报备详情" name="0">
              <show-data-table 
                style="padding: -5px 0 10px 0"
                :sitem="sitem"
                :columns="editColumns"
              >

                <template #status="{ scope }">
                  <el-tag size="mini">
                    {{ (statusOptions.find(({value}) => value === String(sitem.status)) || {}).label || '--' }}
                  </el-tag>
                </template>
                <template #is_compliance="{ scope }">
                 <el-tag size="mini">
                  {{sitem.is_compliance === "0" ? "未填写" : sitem.is_compliance === "1" ? "合规" : "不合规"}}
                </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 slot="reference" class="el-icon-warning-outline fr" />
                 </el-popover>
                </template>

                <template slot="customerName">
                    <span>{{ sitem.customerName }}</span>
                    <el-popover placement="top" width="300" trigger="hover">
                      <ul>
                       <li>
                         <span>企业客户编号：</span><span>{{ sitem.customerCode }}</span>
                       </li>
                      </ul>
                      <i slot="reference" class="el-icon-warning-outline fr" />
                  </el-popover>
                </template>

                <template slot="companyName">
                  <span>{{ sitem.companyName }}</span>
                  <el-popover v-if="sitem.companyNo" placement="top" width="300" trigger="hover">
                    <ul>
                      <li>
                        <span>业务公司编号编号：</span><span>{{ sitem.companyNo }}</span>
                      </li>
                    </ul>
                    <i slot="reference" class="el-icon-warning-outline fr" />
                  </el-popover>
                </template>

                <template slot="fill_type">
                  <el-tag size="mini">
                    {{(fillTypeOptions.find( ({value}) => value === String(sitem.fill_type)) || {}).label || "--"}}
                  </el-tag>
                </template>
              </show-data-table>
            </ElCollapseItem>
            
            <ElCollapseItem title="商品详情" name="1">
              <show-goods-data-table
                :newTime="newTime"
                v-if="newTime !== '' && sitem"
                :type="sitem.fill_type"
                :skucode="sitem.skuCode"
                :spucode="sitem.spuCode"
                :iscgd="String(sitem.fill_type) === '3'"
                :border="true"
              />
            </ElCollapseItem>
            
            <ElCollapseItem title="是否合规设置" name="2" v-if="String(sitem.is_compliance) === '0' && powers.includes('095')">
              <ComplianceForm :id="id" @refresh="initialData" />
            </ElCollapseItem>

            <ElCollapseItem title="待转单" name="3" v-if="(String(sitem.status) === '1' || String(sitem.status) === '2') && (ppowers.includes('1') || ppowers.includes('2'))">
              <WaitTransferred :id="id" :waitNum="sitem.wait_num" @refresh="initialData" />
            </ElCollapseItem>
          </ElCollapse>
        </ElTabPane>

        <ElTabPane label="审批记录">
          <process-time-line
            v-if="newTime !== ''"
            :newTime="newTime"
            :type="'YWBBD'"
            :orderCode="id"
          />
        </ElTabPane>

        <ElTabPane label="流程图">
          <flow-chart process_id="32" type="YWBBD" :orderCode="id" />
        </ElTabPane>
      </template>
    </ElTabs>
  </div>
</template>

<script>
import CreateBusinessForm from './components/createBusinessForm'
import WaitTransferred from "./components/waitTransferred.vue"
import ComplianceForm from "./components/complianceForm.vue"
import asyncRequest from "@/apis/service/sellOut/businessFiling"
import { editColumns, coveColumns,statusOptions } from "./config/columns"

export default {
  components: {
    CreateBusinessForm,
    WaitTransferred,
    ComplianceForm
  },
  data(){
    return {
      newTime: "",
      actives: ["0", "1",  "2", "3"],
      sitem: {},
      editColumns,
      coveColumns,
      statusOptions,
      fillTypeOptions: [
        { value: "1", label: "库存" },
        { value: "2", label: "非库存" },
        { value: "3", label: "咨询商品" }
      ]
    }
  },
  mounted(){
    this.initialData();
  },
  computed:{
    id(){
      return this.$route.query.id;
    },
    isAdd(){
      return this.$route.query.type === "add";
    },
    powers(){
      const { btnList } = this.$store.getters;
      const tran = btnList.find(item => item.menu_route == "businessFilingDetail") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
    ppowers() {
      const tran =
        this.$store.getters.roleProcess.find((i) => i.process_type === "YWBBD") || {};
      const { action } = tran ?? {};
      return action ?? [];
    }
  },
  methods:{
    async initialData(){
      const response = await asyncRequest.detail({ id: this.id})
      if(response.code !== 0) return;
      this.sitem = response.data;
      this.sitem.wait_num = response.data.good_num - response.data.transfer_num;
      this.newTime = (new Date()).valueOf();
    }
  }
}
</script>

<style lang="scss" scoped>
.business-container {
  padding: 10px;
}
</style>
