<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-select v-model="queryParam.alertType" style="width: 120px">
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="省">省</a-select-option>
                <a-select-option value="市">市</a-select-option>
                <a-select-option value="区">区</a-select-option>
                <a-select-option value="学校">学校</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item  label="预警区域：">
              <a-select v-model="queryParam.alertArea" style="width: 8rem;">
                <a-select-option key="">--全部--</a-select-option>
                <a-select-option v-for="d in schoolNames" :key="d.value" :value="d.value">{{d.text}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item  label="名称：">
              <a-input  placeholder="名称" v-model="queryParam.name"></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.name"></a-input>
        </a-form-item>
        <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="预警类型">
          <a-select v-model="modifyForm.alertType" style="width: 120px">
            <a-select-option value>请选择</a-select-option>
            <a-select-option value="省">省</a-select-option>
            <a-select-option value="市">市</a-select-option>
            <a-select-option value="区">区</a-select-option>
            <a-select-option value="学校">学校</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="预警区域">
          <a-select v-model="modifyForm.alertArea" style="width: 13rem;">
            <a-select-option key="">--全部--</a-select-option>
            <a-select-option v-for="d in schoolNames" :key="d.value" :value="d.value">{{d.text}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="预警值">
          <a-input placeholder="预警值" v-model="modifyForm.alertNumber"></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/salesAlertAPI";
import {getSchoolNames} from "../../../api/school-center/userManager/newUserAPI";
export default {
  name: "salesAlert",
  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:'',
        name: '',
        alertType: '',
        alertArea: '',
        alertNumber: '',
        remarks: '',
      },
      schoolNames: [],
      subNameList: [],
      packageName:[],
      chosePages:[],
      products:[],
      //输入框列表
      queryParam: {
        alertType: '',
        alertArea: '',
        name: '',
      },
      modifyvisible: false,
      visiblepicture: false,
      columns: [
        {dataIndex: 'name', width: 200, title: '名称', align: "center"},
        {dataIndex: 'alertType', width: 200, title: '预警类型', align: "center"},
        {dataIndex: 'alertArea', width: 200, title: '预警区域', align: "center"},
        {dataIndex: 'alertNumber', 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.name = "";
      this.modifyForm.alertType = "";
      this.modifyForm.alertArea = "";
      this.modifyForm.alertNumber = "";
      this.modifyForm.remarks = "";
      setTimeout(()=>{
        this.Formtable.setFieldsValue({
          name:"",
          alertType:"",
          alertArea:"",
          alertNumber:"",
          remarks:"",
        })
      },0)
      this.modifyvisible=true;
    },
    update(data){
      this.titleName="添加"
      this.modifyForm.id = data.id;
      this.modifyForm.name = data.name;
      this.modifyForm.alertType = data.alertType;
      this.modifyForm.alertArea = data.alertArea;
      this.modifyForm.alertNumber = data.alertNumber;
      this.modifyForm.remarks = data.remarks;
      setTimeout(()=>{
        this.Formtable.setFieldsValue({
          name:data.name,
          alertType:data.alertType,
          alertArea:data.alertArea,
          alertNumber:data.alertNumber,
          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();
      });
    },
    getSchoolNames() {
      this.queryParam.alertArea = ''
      this.schoolNames = []
      getSchoolNames({"substName": ""}).then((res) => {
        if (res.state == "success") {
          const result = res.data
          result.forEach((r) => {
            if (r.schoolName === 'null')
              return;
            this.schoolNames.push({
              value: r.id,
              text: r.schoolName
            })
          })
        }
      })
    },
  },
  mounted() {
    this.getSchoolNames();
  }
}
</script>

<style scoped>

</style>
