<template>
  <div>
  <basicDetails
      ref="details"
      :titleText="mainData.enterprisename"
      formPath="salerPublicCustomer/detail"
      :editData="mainData"
      :mainAreaData="mainAreaData"
      turnPageId="20221014164702"
      idname="sa_customersid"
      :tags="[]"
      :tabs="['详细信息','联系人信息','客户地址','客户财务信息','工商信息','项目商机','报价单','合同信息']"
      @pageChange="pageChange"
      @onEditSuccess="queryMainData($route.query.id)">
    <div slot="tags">
      <!-- 使用此插槽可不传[tags] -->
      <!-- :tabs="['经销商团队','代理区域','营销类别','账户余额']" -->
    </div>
    <div slot="customOperation" style="float: right;margin-right: -90%">
      <!-- 此区域提供了自定义操作按钮 -->

      <el-popover
          placement="bottom"
          width="50">
        <div class="normal-margin">
          <el-button style="width:100%" size="mini" block @click="transactionStatusShow">更改成交状态</el-button>
        </div>
        <div class="normal-margin">
          <el-button style="width:100%" size="mini" block @click="receive">领取</el-button>
        </div>
        <div class="normal-margin" v-show="mainData.datastatus === 0">
          <el-button style="width:100%" size="mini" block @click="dataStatus(2)">锁定</el-button>
        </div>
        <div class="normal-margin" v-show="mainData.datastatus === 2">
          <el-button style="width:100%" size="mini" block @click="dataStatus(0)">解锁</el-button>
        </div>
        <div class="normal-margin">
          <el-button style="width:100%" size="mini" block @click="handleClose(1)">转移</el-button>
        </div>
        <div class="normal-margin">
          <el-button style="width:100%" size="mini" block @click="handleClose(2)">退回</el-button>
        </div>
        <div class="normal-margin" v-show="mainData.datastatus !== 1">
          <el-button style="width:100%" size="mini" block @click="handleClose(3)">作废</el-button>
        </div>
        <el-button size="mini" slot="reference" icon="el-icon-more"></el-button>
      </el-popover>
    </div>
    <div slot="slot0" >
      <detailed :data="this.$route.query.id"></detailed>
    </div>
    <div slot="slot1">
      <contacts :data="this.$route.query.enterpriseid"></contacts>
    </div>
    <div slot="slot2">
      <customerAddress :data="this.$route.query.enterpriseid"></customerAddress>
    </div>
    <div slot="slot3">
      <finance :data="this.$route.query.enterpriseid"></finance>
    </div>
  </basicDetails>
  <el-dialog title="更改成交状态" :visible.sync="dialogFormVisible" width="500px">
    <div slot="title" style="font-size: 15px">
      更改成交状态
    </div>
    <el-row :gutter="20">
      <el-form :model="form"  ref="form" label-width="120px" label-position="left" size="mini">
        <el-col :span="20">
          <el-form-item label="成交状态" >
            <el-select v-model="form.status" placeholder="请选择成交状态">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="dialog-footer">
      <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
      <el-button size="small" type="warning" @click="transactionStatus" class="normal-btn-width btn-warning">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import detailed from './modules/detailedData'
import contacts from './modules/contactsData'
import customerAddress from './modules/customerAddress'
import finance from './modules/customerFinance'
export default {
  name: "index",
  data() {
    return {
      mainData:{},
      mainAreaData:[],
      tags:[],
      dialogFormVisible:false,
      form:{
        status
      },
      options:[
        {
          label:'未成交',
          value:'未成交'
        },
        {
          label:'已成交',
          value:'已成交'
        },
        {
          label:'多次成交',
          value:'多次成交'
        }
      ]
    }
  },
  components:{
    detailed,
    contacts,
    customerAddress,
    finance
  },
  methods:{
    async queryMainData (id) {
      const res = await this.$api.requested({
        "id": 20221012164302,
        "content": {
          "sa_customersid": this.$route.query.id
        },
      })
      this.mainData = res.data
      this.$refs['details'].param.content.isExport = false
      // this.$refs['details'].param.content.sa_customersid = [this.mainData.sa_customersid]
      this.$store.dispatch('sendDataToForm',this.mainData)
      this.changeDataStructure()
    },
    pageChange (id,rowindex) {
      this.$router.replace({path:'/salerPublicCustomerDetail',query:{id:id,rowindex:rowindex}})
      this.queryMainData(id)
    },
    changeDataStructure() {
      this.mainAreaData = [
        {
          label:'客户编号',
          value:this.mainData.sa_customersid
        },
        {
          label:'客户级别',
          value:this.mainData.grade
        },
        {
          label:'客户类型',
          value:this.mainData.type
        },
        {
          label:'上级企业',
          value:this.mainData.parentid
        },
        {
          label:'成交状态',
          value:this.mainData.tradingstatus
        },
        {
          label:'负责人',
          value:this.mainData.createby
        },
        {
          label:'最近跟近时间',
          value:''
        },
        {
          label:'所属公海',
          value:this.mainData.poolname
        }
      ]
    },
    /*查询标签*/
    async queryTags(data){
      const res = await this.$api.requested({
        "id": 20220929085401,
        "content": {
          "ownertable":data[0].ownertable,
          "ownerid":data[0].ownerid
        }
      })
      this.tags = res.data.datatag
    },
    /*领取*/
    async receive(){
      console.log(this.mainData)
      const res = await this.$api.requested({
        "id": 20221014160202,
        "content": {
          "sa_customersid":this.mainData.sa_customersid
        },
      })
      this.tool.showMessage(res,()=>{
        this.$emit('onSuccess')
      })
    },
    handleClose(id) {
      if (id === 1){
        this.$confirm('确认进行转移操作嘛？')
            .then(_ => {
              this.transfer()
            })
            .catch(_ => {});
      }else if(id === 2){
        this.$confirm('确认进行退回操作嘛？')
            .then(_ => {
              this.goBack()
            })
            .catch(_ => {});
      }else if(id === 3){
        this.$confirm('确认进行作废操作嘛？')
            .then(_ => {
              this.dataStatus(1)
            })
            .catch(_ => {});
      }
    },
    /*转移*/
    async transfer(){
      const res = await this.$api.requested({
        "id": 20221014102502,
        "content": {
          "sa_customerpoolid":this.mainData.sa_customerpoolid,//公海池id
          "sa_customersids":this.mainData.sa_customersids//客户id
        },
      })
      this.tool.showMessage(res,()=>{
        this.$emit('onSuccess')
      })
    },
    /*退回*/
    async goBack(){
      const res = await this.$api.requested({
        "id": 20221014102602,
        "content": {
          "sa_customerpoolid": this.mainData.sa_customerpoolid,
          "sa_customersids": this.mainData.sa_customersids
        },
      })
      this.tool.showMessage(res,()=>{
        this.$emit('onSuccess')
      })
    },
    transactionStatusShow(){
      this.dialogFormVisible = true
    },
    /*更改成交状态*/
    async transactionStatus(){
      const res = await this.$api.requested({
        "id": 20221012164102,
        "content": {
          "sa_customersids": [this.mainData.sa_customersid],
          "tradingstatus": this.form.status//（未成交、已成交、多次成交）
        },
      })
      this.tool.showMessage(res,()=>{
        this.dialogFormVisible = false
        this.$emit('onSuccess')
      })
    },
    /*数据状态变更*/
    async dataStatus(status){
      const res = await this.$api.requested({
        "id": 20221012164002,
        "content": {
          "sa_customersids": [this.mainData.sa_customersid],
          "datastatus": status//（0:正常；1:作废；2:锁定）
        },
      })
      this.tool.showMessage(res,()=>{
        this.dialogFormVisible = false
        this.$emit('onSuccess')
      })

    }
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
    this.queryTags(this.$route.query.tag)
  },
}
</script>

<style scoped>

</style>