<template>
  <div class="mod-config">
    <!-- 条件查询 -->
    <el-form :inline="true" label-position="top" :model="searchData" @keyup.enter.native="getDataList()">
      <el-form-item :label="'控制内容'">
        <el-input v-model="searchData.baseDesc" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchData.baseData" placeholder="请选择" style="width: 90px">
          <el-option label="全部" value=""></el-option>
          <el-option label="控制" value="控制"></el-option>
          <el-option label="未控制" value="控制"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="控制方式">
        <el-select v-model="searchData.controlStyle" placeholder="请选择" style="width: 90px">
          <el-option label="全部" value=""></el-option>
          <el-option label="强制" value="强制"></el-option>
          <el-option label="提示" value="提示"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="' '">
        <el-button type="primary" @click="getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item :label="' '">
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          {{ "导出" }}
        </download-excel>
      </el-form-item>
    </el-form>

    <!-- 展示列表 -->
    <el-table
      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed == '' ? false : item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden">{{scope.row[item.columnProp]}}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="160"
        label="操作">
        <template slot-scope="scope">
          <el-link style="cursor: pointer" v-if="scope.row.baseData === '未控制'" @click="control(scope.row)">控制</el-link>
          <el-link style="cursor: pointer" v-if="scope.row.baseData === '控制'" @click="control(scope.row)">取消控制</el-link>
          <el-link style="cursor: pointer" @click="updateModal(scope.row)">编辑</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 检验模板新增/修改 -->
    <el-dialog title="控制维护" :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="430px">
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="控制内容:">
          <el-input v-model="modalData.baseDesc" :disabled="modalDisableFlag" style="width: 387px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="控制方式:">
          <el-select v-model="modalData.controlStyle" placeholder="请选择" style="width: 120px">
            <el-option label="强制" value="强制"></el-option>
            <el-option label="提示" value="提示"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参数一:">
          <el-input v-model="modalData.thirdType" style="width: 120px"></el-input>
        </el-form-item>
        <el-form-item label="参数二:">
          <el-input v-model="modalData.secondType" style="width: 120px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="备注:">
          <el-input v-model="modalData.remark" style="width: 387px"></el-input>
        </el-form-item>
      </el-form>
      <el-footer style="height:40px;margin-top: 10px;text-align:center">
        <el-button type="primary" @click="saveData()">保存</el-button>
        <el-button type="primary" @click="modalFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>
  </div>
</template>

<script>
import {
  sysControlModelSearch, // 列表查询
  controlData, // 控制
  sysControlModelUpdate, // 编辑
} from "@/api/base.js"
import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'
export default {
  data() {
    return {
      // 是否收藏
      favorite: false,
      // 导出 start
      exportData: [],
      exportName: "现场动控模型" + this.dayjs().format('YYYYMMDDHHmmss'),
      exportHeader: ["现场动控模型"],
      exportFooter: [],
      exportList:[],
      // 导出 end
      searchData: {
        site: this.$store.state.user.site,
        baseDesc: '',
        baseData: '',
        controlStyle: '',
      },
      height: 200,
      dataList: [],
      dataListLoading: false,
      modalFlag: false,
      modalDisableFlag: false,
      modalData: {
        controlNo: '',
        site: this.$store.state.user.site,
        updateBy: this.$store.state.user.name,
        type: '',
        baseData: '',
        baseDesc: '',
        status: '',
        remark: '',
        thirdType: '',
        secondType: '',
        controlStyle: '',
        parameterTable: ''
      },
      // 检验项目展示标头
      columnList: [
        {
          columnProp: 'controlNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          columnProp: 'baseDesc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '控制内容',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          columnProp: 'controlStyle',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '控制方式',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          columnProp: 'baseData',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '状态',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          columnProp: 'thirdType',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '参数1',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          columnProp: 'secondType',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '参数2',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          columnProp: 'remark',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '备注',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          columnProp: 'updateDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '更新时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          columnProp: 'updateBy',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '更新人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
      ],
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.height = window.innerHeight - 150
    })
  },
  created() {
    this.getDataList()
  },
  methods: {

    // 获取数据列表
    getDataList () {
      sysControlModelSearch(this.searchData).then(({data}) => {
        this.dataList = data.rows
      })
    },

    // 控制
    control (row) {
      this.modalData = {
        controlNo: row.controlNo,
        site: this.$store.state.user.site,
        updateBy: this.$store.state.user.name,
        type: row.type,
        baseData: row.baseData,
        baseDesc: row.baseDesc,
        status: row.status,
        remark: row.remark,
        thirdType: row.thirdType,
        secondType: row.secondType,
        controlStyle: row.controlStyle,
        parameterTable: row.parameterTable
      }
      controlData(this.modalData).then(({data}) => {
        if (data && data.code === 0) {
          this.getDataList()
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {}
          })
        } else {
          this.$alert(data.msg, '错误', {
            confirmButtonText: '确定'
          })
        }
      })
    },

    // 编辑
    updateModal (row) {
      this.modalData = {
        controlNo: row.controlNo,
        site: this.$store.state.user.site,
        updateBy: this.$store.state.user.name,
        type: row.type,
        baseData: row.baseData,
        baseDesc: row.baseDesc,
        status: row.status,
        remark: row.remark,
        thirdType: row.thirdType,
        secondType: row.secondType,
        controlStyle: row.controlStyle,
        parameterTable: row.parameterTable
      }
      this.modalDisableFlag = true
      this.modalFlag = true
    },

    // 保存编辑
    saveData () {
      if (this.modalData.controlStyle === '' || this.modalData.controlStyle == null) {
        this.$alert('请选择控制方式！', '错误', {
          confirmButtonText: '确定'
        })
        return false
      }
      sysControlModelUpdate(this.modalData).then(({data}) => {
        if (data && data.code === 0) {
          this.getDataList()
          this.modalFlag = false
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {}
          })
        } else {
          this.$alert(data.msg, '错误', {
            confirmButtonText: '确定'
          })
        }
      })
    },

    // 校验用户是否收藏
    favoriteIsOk() {
      let userFavorite = {
        userId: this.$store.state.user.id,
        languageCode: this.$i18n.locale
      }
      userFavoriteList(userFavorite).then(({data}) => {
        for (let i = 0; i < data.list.length; i++) {
          if (this.$route.meta.menuId === data.list[i].menuId) {
            this.favorite = true
          }
        }
      })
    },

    // 收藏 OR 取消收藏
    favoriteFunction () {
      let userFavorite = {
        userId: this.$store.state.user.id,
        functionId: this.$route.meta.menuId,
      }
      if (this.favorite) {
        removeUserFavorite(userFavorite).then(({data}) => {
          this.$message.success(data.msg)
          this.favorite = false
        })
      } else {
        // 收藏
        saveUserFavorite(userFavorite).then(({data}) => {
          this.$message.success(data.msg)
          this.favorite = true
        })
      }
    },

    //导出excel
    async createExportData() {
      this.searchData.limit = -1
      this.searchData.page = 1
      await sysControlModelSearch(this.searchData).then(({data}) => {
        this.exportList = data.rows
      })
      return this.exportList
    },

    startDownload() {

    },

    finishDownload() {

    },

    fields() {
      let json = "{"
      this.columnList.forEach((item, index) => {
        if (index == this.columnList.length - 1) {
          json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
        } else {
          json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
        }
      })
      json += "}"
      let s = eval("(" + json + ")")
      return s
    },

  },
}
</script>
