<template>
  <div class="flex">
    <!-- 营销区域列表 -->
    <areaTree ref="arealist" style="width:250px;flex:0 1 auto" @onClick="onClick">
    </areaTree>
    <div class="hm-info-panel">
      <basicLayout 
        ref="basicLayout" 
        formPath="marketing2/agent"
        tableName="agentTable" 
        idName="sa_agentsid"
        :detailPath="{path:'/agent_detail'}"
        :apiId="{query:20221011144903,del:20221011145003}"
        :autoQuery="false"
        :options="options"
        @listCreate="list">
        <div slot="titleRight">
          <importFile 
            ref="importFile" 
            class="inline-16" 
            :bindData="{ownertable:'sa_agents',ownerid:$route.query.id,usetype:'default'}" 
            :errorUrl="errorUrl" 
            @clearUrl="errorUrl = null" 
            @onSuccess="bindImportOrder"
            v-if="tool.checkAuth($route.name,'export')"
          ></importFile>
        </div>
        <div slot="custom">
          <div class="label_center">
            <span class="search_label">状态: </span>
              <el-select
              class="inline-16"
              size="small"
              v-model="status"
              placeholder="请选择经销商状态"
              @change="handleSelectChange"
            >
              <el-option
                v-for="item in statusList"
                :label="item.remarks"
                :value="item.value"
                :key="item.index"
              ></el-option>
            </el-select>
          </div>
        </div>
        <template v-slot:tbList="scope">
          <div>
            <p v-if="scope.data.column.columnname === 'province'">
              {{`${scope.data.column.data.province}-${scope.data.column.data.city}-${scope.data.column.data.county}`}}
            </p>
            <p v-else-if="scope.data.column.columnname === 'status'">
              <span style="color:#d90a0a" 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>
            </p>
            <p v-else-if="scope.data.column.columnname === 'isservice'">
              {{scope.data.column.data.isservice ? '是' : '否'}}
            </p>
            <p v-else>{{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}</p>
          </div>
        </template>
      </basicLayout>
    </div>
  </div>
</template>

<script>
import areaTree from './area/list'
import addArea from './area/modules/add_area'
import editArea from './area/modules/edit_area'
import startArea from './area/modules/start_area'
import delArea from './area/modules/del_area'
import importFile from './importFile.vue'
import { log } from '@antv/g2plot/lib/utils'

export default {
  components:{
    areaTree,
    addArea,
    editArea,
    delArea,
    startArea,
    importFile
  },
  data () {
    return {
      options:[],
      areaInfo:{},
      status:'',
      statusList:[],
      errorUrl:null
    }
  },
  provide () {
    return {
      areaInfo:() => this.areaInfo
    }
  },
  created () {
    this.userstatus()
  },
  methods:{
    async userstatus() {
      let param = {
        classname: "sysmanage.develop.optiontype.optiontype",
        method: "optiontypeselect",
        content: {
          pageNumber: 1,
          pageSize: 20,
          typename: "userstatus",
          parameter: {},
        },
      };
      const res = await this.$api.requested(param);
      this.statusList = res.data;
    },
    async bindImportOrder (id) {
      const res = await this.$api.requested({
        "id": 20230311163004,
        "content": {
        "attachmentid":id
        }
      })
      if (res.data !== '成功') {
        this.errorUrl = res.data
      }
      this.tool.showMessage(res,() => {
        this.$refs.basicLayout.listData()
      })
    },
    handleSelectChange() {
      this.$refs['basicLayout'].param.content.where.status = this.status
       this.$refs['basicLayout'].param.content.pageNumber = 1
      this.$refs['basicLayout'].listData()
    },
    onClick (data) {
      if (typeof data == 'string') {
        this.$refs.arealist.btnType = 'primary'
        this.$refs.arealist.$refs.treeRef.setCurrentKey(null)
        this.$refs['basicLayout'].param.content.isAll = 1
        this.$refs['basicLayout'].param.content.sa_saleareaids = []
        this.$refs['basicLayout'].param.content.containssub = 1
        this.$refs['basicLayout'].listData()
      } else {
        this.areaInfo = data
        this.$refs.arealist.btnType = 'info'
        this.$refs['basicLayout'].param.content.sa_saleareaids = [data.sa_saleareaid]
        this.$refs['basicLayout'].param.content.containssub = 1
        this.$refs['basicLayout'].param.content.isAll = 0
        this.$refs['basicLayout'].listData()
        this.$store.dispatch('sendDataToForm',data)
      }
      
    },
    onSuccess () {
      this.$refs.arealist.query_arealist()
    },
    onScopeSuccess () {
      this.$refs.salescope.query_areascope(this.areaInfo.sa_saleareaid)
    },
    editSuccess (form) {
      this.$refs.arealist.query_arealist(()=>{
        this.areaInfo = form
        this.$emit('onClick',this.areaInfo)
        this.$refs['arealist'].setCurrentKey(this.areaInfo.sa_saleareaid)
      })
    },
    onStartArea (status) {
      status === 1?this.areaInfo.isused = 0:this.areaInfo.isused = 1
    },
    list(param) {
      param.content.isAll = 0
    }
  }
}

</script>
<style>
</style>
<style scoped>
.flex{
  display: flex;
}
.hm-info-panel{
  flex:1;
  width:500px;
  height:calc(100vh - 100px);
  overflow-y:scroll
}
.search_label {
  display: inline-block;
  font-size: 12px;
  color:rgb(163, 163, 163) !important;

  margin-right: 10px;
}
</style>