<template>
  <div>
    <basicLayout
        ref="basicLayout"
        tableName="contractTable"
        idName="sa_contractid"
        :apiId="{query:20221121201502,del:''}"
        :autoQuery="false"
        @checkboxCallBack="checkboxCallBack"
    >
      <template #titleLight>
        <batchDeletion v-if="tool.checkAuth($route.name,'batchDeletion')" ref="batchDeletion" :ownerids="selectData" :sys_object="application" @delSuccess="queryData"></batchDeletion>
        <batchRecovery v-if="tool.checkAuth($route.name,'batchRecovery')" ref="batchRecovery" :ownerids="selectData" :sys_object="application" @recoverySuccess="queryData"></batchRecovery>
      </template>
      <template #custom>
        <div class="mt-10">
          <p class="search__label">应用:</p>
          <el-select
              class="inline-24"
              size="small"
              v-model="application"
              placeholder="请选择范围"
              @change="applicationChange"
          >
            <el-option
                v-for="item in applicationList"
                :key="item.index"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">合同类型:</p>
          <el-select
              class="inline-24"
              size="small"
              v-model="type"
              placeholder="请选择合同类型"
              clearable
              @change="$refs.basicLayout.param.content.pageNumber=1;$refs.basicLayout.param.content.where.type=type;$refs.basicLayout.listData()"
          >
            <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.remarks"
                :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">合同状态:</p>
          <el-select
              class="inline-24"
              size="small"
              v-model="status"
              placeholder="请选择合同状态"
              clearable
              @change="$refs.basicLayout.param.content.pageNumber=1;$refs.basicLayout.param.content.where.status=status;$refs.basicLayout.listData()"
          >
            <el-option label="新建" value="新建" ></el-option>
            <el-option label="审核" value="审核" ></el-option>
            <el-option label="已提交" value="已提交" ></el-option>
            <el-option label="已终止" value="已终止" ></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label class="search__label" >创建日期:</label>
          <el-date-picker
              style="margin-right: 24px !important;"
              size="small"
              @change="selectChange"
              value-format="yyyy-MM-dd"
              v-model="dateSelect"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable>
          </el-date-picker>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname == 'status'">
          <span style="color:#3874f6" v-if="scope.data.column.data[[scope.data.column.columnname]] == '新建'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#52c41a" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '已提交'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#333333" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '审核'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#000000" v-else>{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'type'">
          <span v-if="scope.data.column.data[[scope.data.column.columnname]] == '框架'">经销商合作协议</span>
          <span v-else-if="scope.data.column.data.typemx == '经销'">经销项目协议</span>
          <span v-else-if="scope.data.column.data.typemx == '直销'">直销项目协议</span>
          <span v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '工具借用'">工具使用协议</span>
          <span v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '居间'">居间协议</span>
        </div>
        <div  v-else-if="scope.data.column.columnname == 'discountrate'">
          <!--          <div v-if="scope.data.column.data"></div>-->
          <!--          {{scope.data.column.data[[scope.data.column.columnname]] <1 ?(scope.data.column.data[[scope.data.column.columnname]] * 100).toFixed(2):100}}-->
          <div v-if="scope.data.column.data.type === '框架'">
            {{scope.data.column.data.discountrate<1?Math.round((scope.data.column.data.discountrate * 100)*100)/100:100}}
          </div>
          <div v-else-if="scope.data.column.data.type === '居间'">
            <span v-if="scope.data.column.data.calculatemodel === 1">
              {{scope.data.column.data.orderratio<1?Math.round((scope.data.column.data.orderratio * 100)*100)/100:100}}
            </span>
            <span v-if="scope.data.column.data.calculatemodel === 2">
              {{scope.data.column.data.productdiscount<1?Math.round((scope.data.column.data.productdiscount * 100)*100)/100:100}}
            </span>
          </div>
          <div v-else>--</div>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]}}
        </div>
        <span v-if="!scope.data.column.data[[scope.data.column.columnname]] && scope.data.column.data[[scope.data.column.columnname]] !== 0">--</span>
      </template>
      <template v-slot:tbOpreation="scope">
        <delData class="inline-16" :ownerid="scope.data.data.sa_contractid" :sys_object="application" @delSuccess="queryData"></delData>
        <recovery class="inline-16" :ownerid="scope.data.data.sa_contractid" :sys_object="application" @recoverySuccess="queryData"></recovery>
      </template>
    </basicLayout>
  </div>
</template>

<script>
import recovery from "@/HManagement/ecycle/modules/recovery";
import delData from "@/HManagement/ecycle/modules/delData";
import batchDeletion from "@/HManagement/ecycle/modules/batchDeletion";
import batchRecovery from "@/HManagement/ecycle/modules/batchRecovery";

export default {
  name: "index",
  data () {
    return {
      application:'3',
      applicationList:[
        {
          label: '销售线索',
          value: "1",
        },
        {
          label: '客户',
          value: "2",
        },
        {
          label: '合同',
          value: "3",
        },
        {
          label: '项目商机',
          value: "4",
        },
        {
          label: '报价单',
          value: "5",
        }
      ],
      dateSelect:'',
      typeList:[],
      area:'1',
      tabIndex:"1",
      type:'',
      condition:'',
      status:'',
      selectParam: {
        status: "",
        type: "",
        begindate:"",
        enddate:""
      },
      selectData:[]
    }
  },
  components:{recovery,delData,batchDeletion,batchRecovery},
  methods:{
    queryData(){
      this.$refs.basicLayout.param.content.isAll = 0
      this.$refs.basicLayout.param.content.type = 0
      this.$refs.basicLayout.param.content.deleted = 1
      this.$refs.basicLayout.listData()
    },
    applicationChange(val){
      console.log(val)
      this.$emit("changeApplication",val)
    },
    async getSystemList () {
      /*const res = await this.$store.dispatch('optiontypeselect','dataarea')
      this.areaList = res.data
      console.log(this.areaList);*/

      const res2 = await this.$store.dispatch('optiontypeselect','contracttype')
      this.typeList = res2.data
    },
    async getAgentList () {
      let res = await this.$api.requested({
        "classname": "webmanage.sale.agents.agents",
        "method": "query_agentList",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "agenttype":"经销商",
          "where": {
            "condition": ""
          }
        }
      })
      console.log(res.data);

    },
    selectChange () {
      if (this.dateSelect !== '' && this.dateSelect !== null){
        this.selectParam.begindate = this.dateSelect[0]
        this.selectParam.enddate = this.dateSelect[1]
      }else {
        this.selectParam.begindate = ''
        this.selectParam.enddate = ''
      }
      this.$refs.basicLayout.param.content.where = this.selectParam
      this.$refs.basicLayout.listData()
    },
    checkboxCallBack(val){
      this.selectData = []
      val.forEach((item,index) => {
        this.selectData[index] = item.sa_contractid
      })
      this.$refs.batchDeletion.length = this.selectData.length
      this.$refs.batchRecovery.length = this.selectData.length
      console.log(this.selectData)
    }
  },
  mounted() {
    this.queryData()
  },
  created () {
    this.getSystemList()
    this.getAgentList()
  },
}
</script>

<style scoped>

</style>