<template>
  <basicDetails 
    style="min-width:80vw"
    ref="details"
    :titleText="mainData.enterprisename"
    formPath="marketing2/agent"
    :editData="mainData"
    :mainAreaData="mainAreaData" 
    turnPageId="20221011144903"
    idname="sa_agentsid"
    :tags="[]"
    :tabs="['经销商团队','授权营销类别','授权领域','账户余额查询','地址管理','财务信息','银行卡信息','关联合同','联系人管理','业绩目标','代理区域']"
    @pageChange="pageChange"
    @onEditSuccess="queryMainData($route.query.id)">
    <div slot="tags">
      <!-- 使用此插槽可不传[tags] -->
      <!-- :tabs="['经销商团队','代理区域','营销类别','账户余额']" -->
    </div>
    <div slot="customOperation">
      <!-- 此区域提供了自定义操作按钮 -->
      <customBtn 
          btnName="启 用"
          message="确认启用当前经销商吗?"
          idName="20230212101703"
          keyName="sa_agentsids"
          :id="[$route.query.id]"
          @onSuccess="queryMainData"
          class="inline-16"
          :paramData="[{key:'status',value:'启用'}]"
          v-if="mainData.status == '禁用' && tool.checkAuth($route.name,'handleused')"
        />
        <customBtn 
          btnName="禁 用"
          message="确认禁用当前经销商吗?"
          idName="20230212101703"
          keyName="sa_agentsids"
          :id="[$route.query.id]"
          @onSuccess="queryMainData"
          class="inline-16"
          :paramData="[{key:'status',value:'禁用'}]"
          v-if="mainData.status == '启用' && tool.checkAuth($route.name,'handleused')"
        />
        <customBtn 
          btnName="作 废"
          :dialog="true"
          message="确认删除当前经销商吗?"
          idName="20221011145003"
          keyName="sa_agentsids"
          :id="[$route.query.id]"
          dialogKey="deletereason"
          dialogTitle="作废原因"
          @onSuccess="$store.dispatch('changeDetailDrawer',false);$router.back()"
          class="inline-16"
          v-if="mainData.status == '禁用' && tool.checkAuth($route.name,'delete')"
        />
    </div>
    <div slot="slot0">
      <el-button v-if="tool.checkAuth($route.name,'agentTeamTable')" size="small" type="primary" @click="createAgentAccount" class="normal-margin">创建团队账号</el-button>
      <tableLayout :layout="tablecols" :data="mainData.hrs" :custom="true" height="calc(100vh - 425px)">
        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname === 'name'">
            <div v-if="scope.column.data.isleader === 1">
              <p class="inline-16">{{scope.column.data[scope.column.columnname]}}</p>
              <el-tag size="mini">主账号</el-tag>
            </div>
            <div v-else>
              <p class="inline-16">{{scope.column.data[scope.column.columnname]}}</p>
            </div>

          </div>
          <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
        </template>
      </tableLayout>
    </div>
    <div slot="slot1">
      <SaleClass :data="mainData"></SaleClass>
    </div>
    <div slot="slot2">
      <field :data="mainData"></field>
    </div>
    <div slot="slot3">
      <accountMoney :mainData="mainData"></accountMoney>
    </div>
    <div slot="slot4">
      <agent-address :mainData="mainData"></agent-address>
    </div>
    <div slot="slot5">
      <financial :mainData="mainData"></financial>
    </div>
    <div slot="slot6">
       <bankInfo :data="mainData" ref="bank">
        <addBank v-if="tool.checkAuth($route.name,'bankInfo')" slot="addBank" @onSuccess="$refs.bank.listData()" :data="mainData" />
        <template v-slot:editBank="scope">
            <editBank v-if="tool.checkAuth($route.name,'bankInfo')" class="inline-16" :data="scope.data" @onSuccess="$refs.bank.listData()" />
        </template>
        <template v-slot:delBank="scope">
            <delete-btn v-if="tool.checkAuth($route.name,'bankInfo')" message="确定删除当前银行卡信息吗?" class="inline-16" nameId="20221022165903" :id="scope.data.sys_enterprise_bankid" nameKey="sys_enterprise_bankids" @deleteSuccess="$refs.bank.listData()"></delete-btn>
        </template>
      </bankInfo>
    </div>
    <div slot="slot7" >
      <contract :data="mainData"></contract>
    </div>
    <div slot="slot8"  >
      <agent-contact :mainData="mainData"></agent-contact>
    </div>
    <div slot="slot9">
      <achievementTarget :data="mainData"></achievementTarget>
    </div>
    <div slot="slot10">
      <salescope :data="mainData"></salescope>
    </div>
  </basicDetails>
</template>

<script>
import salescope from './modules/salescope/list'
import SaleClass from './modules/saleclass/index'
import accountMoney from './modules/accountMoney/index'
import agentAddress from './modules/address/list'
import agentContact from './modules/contact/list'
import contract from './modules/contract/index'
import financial from '@/components/financialInfo/index.vue'
import field from './modules/field/index.vue'
import achievementTarget from './modules/achievementTarget/index'
import bankInfo from './modules/bankInfo/index'
import addBank from './modules/bankInfo/add'
import editBank from './modules/bankInfo/edit'
export default {
  data () {
    return {
      mainData:{},
      mainAreaData:[],
      tablecols:[]
    }
  },
  provide () {
    return {
      detailInfo: () => this.mainData
    }
  },
  components:{
    salescope,
    SaleClass,
    accountMoney,
    agentAddress,
    agentContact,
    financial,
    contract,
    field,
    achievementTarget,
    bankInfo,
    addBank,
    editBank
  },
  methods:{
    async queryMainData (id) {
      const res = await this.$api.requested({
        "classname": "webmanage.sale.agents.agents",
        "method": "query_agentMain",
        "content": {
          "sa_agentsid": this.$route.query.id
        }
      })
      this.mainData = res.data
      console.log(this.mainData);
      
      this.$refs['details'].param.content.containssub = 1
      this.$refs['details'].param.content.sa_saleareaids = [this.mainData.sa_saleareaid]
      this.changeDataStructure()
    },
    pageChange (id,rowindex) {
      this.$router.replace({path:this.$route.path,query:{id:id,rowindex:rowindex}})
      this.queryMainData(id)
    },
    changeDataStructure () {
      let that = this
      this.mainAreaData = [
        {
          label:'经销商编号',
          value: this.mainData.agentnum
        },
        {
          label:'erp编号',
          value: this.mainData.erpagentnum
        },
        {
          label:'是否服务经销商',
          value: this.mainData.isservice?'是':'否'
        },
        {
          label:'状态',
          value:this.mainData.status,
          style:function () {
            let style = {}
            switch (that.mainData.status) {
              case '启用':
                style = {color:"#52C41A"}
                break;
              case '禁用':
                style = {color:"#d90a0a"}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'签约日期',
          value: this.mainData.signdate
        },
        {
          label:'经销商类型',
          value: this.mainData.type
        },
        {
          label:'上级经销商',
          value: this.mainData.parent_enterprisename
        },
        {
          label:'经销商等级',
          value: this.mainData.grade
        },
        /*{
          label:'企业名称',
          value: this.mainData.enterprisename
        },*/
        
        {
          label:'省市县',
          value: `${this.mainData.province}-${this.mainData.city}-${this.mainData.county}`
        },
        {
          label:'详细地址',
          value: this.mainData.address
        },
        {
          label:'企业联系人',
          value: this.mainData.contact
        },
        {
          label:'联系电话',
          value: this.mainData.phonenumber
        },
        {
          label:'税号',
          value: this.mainData.taxno
        },
        {
          label:'免运费金额',
          value: this.mainData.freefreightamount == -1 ? '不免运费' : this.mainData.freefreightamount == 0 ? '免运费' : this.mainData.freefreightamount
        },
        {
          label:'订单可退货天数',
          value: this.mainData.limitreturnday
        },
        {
          label:'是否订单审核可开票',
          value: this.mainData.invoicingpoint == '1' ? '订单审核' : '发货'
        },
        {
          label:'是否授权所有营销类别',
          value: this.mainData.saleclassauth ? '否' : '是'
        },
        {
          label:'创建人',
          value: this.mainData.createby
        },
        {
          label:'创建时间',
          value: this.mainData.createdate
        },
      ]
    },
    createAgentAccount () {
      this.$confirm('是否继续创建团队账户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$api.requested({
          "id": 20220920084301,
          "content": {
            "sys_enterpriseid":this.mainData.sys_enterpriseid
          }
        })
        this.tool.showMessage(res,()=>{
          this.queryMainData()
        })
        /*this.$message({
          type: 'success',
          message: '创建成功!'
        });*/
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消创建'
        });
      });
    }
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
  },
  created () {
    // 获取表结构
    this.tablecols = this.tool.tabelCol(this.$route.name)['agentGrouptable'].tablecols
    // 验证权限
    /*// this.tool.checkAuth(this.$route.name,'update')?'':this.$router.go(-1)*/
  },
}

</script>
<style>
</style>