<template>
  <div class="mod-config">
    <div>
        <span @click="favoriteFunction()">
         <icon-svg :name="favorite?'xiangqufill':'xiangqu'" class="sl-svg"></icon-svg>
        </span>
    </div>
    <el-button @click="searchList()" type="primary">{{ buttons.search }}</el-button>
    <el-button @click="saveColumnList()" type="primary" v-show="showDefault">{{ buttons.defaultTable }}
    </el-button>
    <el-button @click="userSetting" type="primary">{{ buttons.settingTable }}</el-button>

    <el-form v-show="searchShow" :inline="true" :model="queryData" @keyup.enter.native="getDataList()">
      <el-form-item label="呆滞天数">
        <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="queryData.day" clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="rollno">
        <el-input v-model="queryData.rollno" clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="partno">
        <el-input v-model="queryData.partno" clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()" type="primary">{{ buttons.search }}</el-button>
      </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"
        :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 v-if="visible" ref="column" @refreshData="getTableUserColumn"></column>

  </div>
</template>

<script>
import AddOrUpdate from './crollinfo-add-or-update'
import {getCRollInfoList} from '@/api/crollinfo/crollinfo.js'
import column from "../common/column";
import search from "../common/search";
import {
  searchSysLanguageParam,
  searchFunctionButtonList,
  saveButtonList,
} from "@/api/sysLanguage.js"
import {
  saveTableDefaultList,
  getTableDefaultListLanguage,
  getTableUserListLanguage
} from "@/api/table.js"
import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'

export default {
  data() {
    return {
      searchVisible: false,
      searchShow: false,
      // table高度
      height: 450,
      // 是否收藏
      favorite: false,
      addLanguage: false,
      functionId: 3001,
      tableId: "3001SluggishMaterial",
      languageCode: this.$i18n.locale,
      visible: false,
      showDefault: false,
      queryData: {
        day: '',
        rollno: '',
        partno: ''
      },
      // 语言词典集合
      sysLanguageParams: [],
      columnList: [],
      dataList: [],
      buttons: {
        add: '添加',
        edit: '编辑',
        delete: '删除',
        deleteList: '批量删除',
        cz: '操作',
        search: '搜索',
        download: '导出',
        settingTable: '设置列表',
        defaultTable: '设置默认配置'
      },
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate,
    column,
    search
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - 165;
    })
  },
  activated() {
   // this.getDataList()
  },
  methods: {

    // 打开搜索页面
    searchList() {
      if (this.searchShow) {
        this.searchShow = false
        return
      } else {
        this.searchShow = true
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      let query = []
      let r = {
        queryAttributes: "parttypeFlag",
        queryType: "string",
        queryValue: "R",
      }
      query.push(r)
      let toexpiredays = {
        queryAttributes: "toexpiredays",
        queryType: "number",
        queryValue: this.queryData.day,
      }
      query.push(toexpiredays)
      if (this.queryData.rollno != '') {
        let rollno = {
          queryAttributes: "rollno",
          queryType: "string",
          queryValue: this.queryData.rollno,
        }
        query.push(rollno)
      }
      if (this.queryData.partno != '') {
        let partno = {
          queryAttributes: "partno",
          queryType: "string",
          queryValue: this.queryData.partno,
        }
        query.push(partno)
      }
      getCRollInfoList(query).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.list
        }
        this.dataListLoading = false
      })
      //  this.searchShow = false
    },
    // 校验用户是否收藏
    favoriteIsOk() {
      let userFavorite = {
        userId: this.$store.state.user.id,
        languageCode: this.$i18n.locale
      }
      userFavoriteList(userFavorite).then(({data}) => {
        let size = data.list.filter(item => item.menuId == this.$route.meta.menuId).length;
        if (size > 0) {
          this.favorite = true
        } else {
          this.favorite = false
        }
      })
    },
    // 收藏 OR 取消收藏
    favoriteFunction() {
      let userFavorite = {
        userId: this.$store.state.user.id,
        functionId: this.$route.meta.menuId,
      }
      if (this.favorite) {
        // 取消收藏
        this.$confirm(`确定取消收藏`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          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
        })
      }

    },
    // 获取button的词典
    getFunctionButtonList() {
      let queryButton = {
        functionId: this.functionId,
        tableId: this.tableId,
        languageCode: this.languageCode,
        objectType: 'button'
      }
      searchFunctionButtonList(queryButton).then(({data}) => {
        if (data.data.length > 0) {
          this.buttons = data.data
        }
      })
    },
    // 获取语言词典
    getSysLanguageParamList() {
      let querySysLanguageParam = {
        languageCode: this.$i18n.locale
      }
      searchSysLanguageParam(querySysLanguageParam).then(({data}) => {
        this.sysLanguageParams = data.rows
      })
    },
    // 打开页面设置
    userSetting() {
      this.visible = true;
      let queryTable = {
        userId: this.userId,
        functionId: this.functionId,
        tableId: this.tableId,
        languageCode: this.languageCode
      }
      this.$nextTick(() => {
        this.$refs.column.init(queryTable);
      });
    },
    // 获取 用户保存的 格式列
    getTableUserColumn() {
      let queryTableUser = {
        userId: this.userId,
        functionId: this.functionId,
        tableId: this.tableId,
        languageCode: this.languageCode,
        status: true,
      }
      getTableUserListLanguage(queryTableUser).then(({data}) => {
        if (data.rows.length > 0) {
          //this.columnList = []
          this.columnList = data.rows
        } else {
          this.getColumnList()
        }

      })
    },
    // 保存 默认配置 列
    saveColumnList() {
      this.showDefault = false
      saveButtonList(this.buttonList).then(({data}) => {
      })
      saveTableDefaultList(this.columnList).then(({data}) => {
        if (data.code == 0) {
          this.$message.success(data.msg)
          this.showDefault = false
        } else {
          this.showDefault = true
          this.$message.error(data.msg)
        }
      })
      this.getFunctionButtonList();
      this.getColumnList()
    },
    // 获取 tableDefault 列
    getColumnList() {
      let queryTable = {
        functionId: this.functionId,
        tableId: this.tableId,
        languageCode: this.languageCode
      }
      getTableDefaultListLanguage(queryTable).then(({data}) => {
        if (!data.rows.length == 0) {
          this.showDefault = false
          this.columnList = data.rows
        } else {
          this.showDefault = true
        }
      })
    },
  },
  created() {
    this.getTableUserColumn()
    this.getSysLanguageParamList()
    this.getFunctionButtonList()
    this.favoriteIsOk()
  }
}
</script>
<style scoped>
.sl-svg {
  overflow: hidden;
  float: right;
}
</style>
