<template>
  <basic-container>
    <avue-crud :option="option"
               :data="dataList"
               ref="crud"
               v-model="form"
               :page.sync="page"
               :search.sync="search"
               :table-loading="loading"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               @saveColumn="saveColumn"
               @resetColumn="resetColumn"
    >
      <template slot="menuLeft">
        <el-button
          icon="el-icon-printer"
          size="small"
          type="primary"
          :loading="exportLoading"
          @click.stop="downFile"
        >导 出
        </el-button>
      </template>
      <template slot="flagSearch">
        <el-select
          v-model="search.flag"
          placeholder=""
          @change="cut"
        >
          <el-option
            v-for="item in flagOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
      <template slot="userNameSearch">
        <el-select
          v-model="search.userName"
          remote
          filterable
          clearable
          :remote-method="userNameRemoteMethod"
        >
          <el-option
            v-for="item in userNameOptions"
            :key="item.value"
            :label="item.realName"
            :value="item.realName">
          </el-option>
        </el-select>
      </template>
      <template slot="corpNamesSearch">
        <crop-select
          v-model="search.corpNames"
          corpType="KH"
          style="width: 100%"
        ></crop-select>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import option from "./config/mainList.json";
  import clientOption from "./config/clientList.json";
  import { performanceAnalysis ,importAnalysis} from "@/api/workManagement/mainProject";
  import { getUserList } from "@/api/workManagement/mainProject";

  export default {
    data() {
      return {
        form: {},
        search:{},
        option: {},
        exportLoading:false,
        loading:false,
        dataList: [],
        userNameOptions:[],
        flagOptions:[{
          value: '1',
          label: '承做人'
        }, {
          value: '2',
          label: '客户'
        }],
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 10,
          pageSizes: [10, 50, 100, 200, 300, 400, 500,1000]
        },
      }
    },
    async created() {

      this.option = await this.getColumnData(this.getColumnName(58), option);

      getUserList().then(res=>{
        res.data.data.map((item,index)=>{
          if(index <= 20){
            this.userNameOptions.push(item)
          }
        })
      })
    },
    mounted() {

    },
    methods: {
      downFile(){
        this.exportLoading = true
        let  searchParams = Object.assign({},this.search);
        let param = this.paramsAdjustment(searchParams)
        let option = this.deepClone(this.option.column)
        importAnalysis(param).then(res=>{

          option.shift();
          option.shift();

          this.$Export.excel({
            title: "业绩分析",
            columns: option,
            data: res.data.data,
          });
        }).finally(()=>{
          this.exportLoading = false
        })
      },
      cut(val){
        if(val == 1){
          this.option = option
          this.onLoad(this.page,this.search)
        }else{
          this.option = clientOption
          this.onLoad(this.page,this.search)
        }
      },
      userNameRemoteMethod(val){
        getUserList({realName : val}).then(res=>{
          this.userNameOptions = res.data.data
        })
      },
      //新单打开
      addReceipt(row){
        console.log(1)
      },
      //编辑打开
      editOpen(row){
        console.log(1)
      },
      searchReset() {
        console.log('1')
      },
      selectionChange() {
        console.log('1')
      },
      sizeChange(val) {
        this.page.currentPage = 1;
        this.page.pageSize = val;
      },
      currentChange(val) {
        this.page.currentPage = val
      },
      refreshChange(params) {
        this.onLoad(this.page,params);
      },
      //点击搜索按钮触发
      searchChange(params,done) {
        this.onLoad(this.page, params);
        done()
      },
      paramsAdjustment(params) {
        params = Object.assign({}, this.search);
        if(!params.flag){
          params.flag = "1"
        }
        if(!params.year){
          params.year = "2021"
        }
        return params
      },

      onLoad(page, params) {
        this.loading = true;
        params = this.paramsAdjustment(params)
        performanceAnalysis(page.currentPage, page.pageSize,params).then(res=>{
          this.dataList = res.data.data.records
          this.page.total = res.data.data.total
        }).finally(()=>{
          this.loading = false;
        })
      },
      //列保存触发
      async saveColumn() {
        const inSave = await this.saveColumnData(
          this.getColumnName(58),
          this.option
        );
        if (inSave) {
          this.$message.success("保存成功");
          //关闭窗口
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      },
      async resetColumn() {
        const inSave = await this.delColumnData(
          this.getColumnName(58),
          option
        );
        if (inSave) {
          this.$message.success("重置成功");
          this.option = option;
          //关闭窗口
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      },
    },
  }
</script>

<style scoped>

</style>
