<template>
  <div class="flex-container">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="4" :sm="8">
            <a-form-item  label="职位：">
              <a-input  placeholder="职位" v-model="queryParam.position"></a-input>
            </a-form-item>
          </a-col>
          <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
              <a-col :md="6" :sm="24">
                  <a-button @click="search()" type="primary">查询</a-button>
                   <a-divider type="vertical"/>
                  <a-button @click="add()" type="primary">添加</a-button>
              </a-col>
          </span>
        </a-row>
      </a-form>
    </div>

    <!--列表-->
    <s-table  :locale="emptyText" :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling">
      <template slot="operation" slot-scope="text,record">
        <a @click="update(record)">编辑</a>
        <a-divider type="vertical"/>
        <a-popconfirm title="是否要删除此行？" @confirm="deleteActivity(record.id)">
          <a>删除</a>
        </a-popconfirm>
        <!--                <a-divider type="vertical"/>-->
      </template>
    </s-table>

    <!--添加----弹框-->
    <a-modal :title="titleName" :visible="modifyvisible"  @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="840px">
      <a-form :form="Formtable">
        <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="职位">
          <a-input  placeholder="职位" v-model="modifyForm.position"></a-input>
        </a-form-item>
        <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="最低销售指标">
          <a-input placeholder="最低销售指标" v-model="modifyForm.score"></a-input>
        </a-form-item>
        <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="备注">
          <a-input placeholder="备注" v-model="modifyForm.remarks"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import STable from '@/components/table';
import {cloneObject} from '@/utils/util';
import {
  listData,
  addData,
  updateData,
  deleteData,
} from "../../../api/school-center/louZhang/KpiScoreAPI";
export default {
  name: "KpiScore",
  components: {
    STable,cloneObject
  },
  data: function () {
    return {
      emptyText: {emptyText: '暂无数据'},
      previewVisible: false,
      previewImage: '',
      fileList: [
      ],
      apis:'',
      fileid:{},
      // form
      Formtable: this.$form.createForm(this, {name: 'Formtable'}),
      titleName:"",
      modifyForm: {
        id: '',
        position: '',
        score: '',
        remarks: '',
      },
      subNameList: [],
      packageName:[],
      chosePages:[],
      products:[],
      //输入框列表
      queryParam: {
        position: '',
      },
      modifyvisible: false,
      visiblepicture: false,
      columns: [
        {dataIndex: 'position', width: 200, title: '职位', align: "center"},
        {dataIndex: 'score', width: 200, title: '最低销售指标', align: "center"},
        {dataIndex: 'remarks', width: 200, title: '备注', align: "center"},
        {
          dataIndex: 'operation',
          width: 200,
          title: '操作',
          align: "center",
          scopedSlots: {customRender: 'operation'},
          fixed: "right"
        }]
      ,
      rowdata: parameter => {
        const env = process.env.NODE_ENV; //获取当前环境
        if (env === 'development') {     //测试环境默认添加前缀
          this.apis = '/api/';
        }
        let params = {
          pageNo: parameter.pageNo,
          pageSize: parameter.pageSize
        };
        let obj = cloneObject(this.queryParam);
        //表示
        return listData(Object.assign(params, obj)).then(res => {
          let data = {};
          if (res.page.state !== "success") {
            this.$message.error("查询失败！", 5);
            this.emptyText.emptyText = '查询失败！'
            data = {
              data: [],
              pageSize: parameter.pageSize,
              pageNo: 1,
              totalCount: 0
            };
          } else {
            data = {
              data: res.page.data.records,
              pageSize: parameter.pageSize,
              pageNo: parameter.pageNo,
              totalCount: res.page.data.total
            };
          }
          return data;
        });
      }
    }
  },
  methods:{
    search() {
      this.$refs.table.refresh({search: true})
    },
    add(){
      this.titleName="添加"
      this.modifyForm.id = "";
      this.modifyForm.position = "";
      this.modifyForm.score = "";
      this.modifyForm.remarks = "";
      setTimeout(()=>{
        this.Formtable.setFieldsValue({
          id:"",
          position:"",
          score:"",
          remarks:"",
        })
      },0)
      this.modifyvisible=true;
    },
    update(data){
      this.titleName="编辑"
      this.modifyForm.id = data.id;
      this.modifyForm.position = data.position;
      this.modifyForm.score = data.score;
      this.modifyForm.remarks = data.remarks;
      setTimeout(()=>{
        this.Formtable.setFieldsValue({
          id:data.id,
          position:data.position,
          score:data.score,
          remarks:data.remarks,
        })
      },0)
      this.modifyvisible=true;
    },
    //提交表单
    createfunctionOk(){
      let obj = cloneObject(this.modifyForm);
      //插入数据
      if (this.modifyForm.id==""){
        addData(obj).then(res => {
          if (res.state == "success") {
            this.$notification.success({
              message: "添加成功！",
              description: "",
              duration: 4
            });
          } else {
            let msg = res.msg != undefined ? res.msg : "删除成功！";
            this.$notification.error({
              message: msg,
              description: "",
              duration: 4
            });
          }
          this.search();
        });
      }else {
        updateData(obj).then(res => {
          if (res.state == "success") {
            this.$notification.success({
              message: "更新成功！",
              description: "",
              duration: 4
            });
          } else {
            let msg = res.msg != undefined ? res.msg : "删除成功！";
            this.$notification.error({
              message: msg,
              description: "",
              duration: 4
            });
          }
          this.search();
        });
      }
      this.modifyvisible=false;
    },
    createfunctionCancel(){
      this.modifyvisible=false;
    },
    deleteActivity(id){
      deleteData({id:id}).then(res => {
        if (res.state == "success") {
          this.$notification.success({
            message: "删除成功！",
            description: "",
            duration: 4
          });
        } else {
          this.$notification.error({
            message: "删除失败！",
            description: "",
            duration: 4
          });
        }
        this.search();
      });
    },
  }
}
</script>

<style scoped>

</style>
