<template>
  <div class="app-container orderList">
    <div class="filter-container">
      <el-radio-group v-model="isend" class="filter-item" @change="getList">
        <el-radio-button label="">所有</el-radio-button>
        <el-radio-button label="1">到期</el-radio-button>
        <el-radio-button label="0">未到期</el-radio-button>
      </el-radio-group>
      <el-date-picker
        v-model="authDate"
        :picker-options="pickerOptions"
        class="filter-item"
        type="daterange"
        format="yyyy年MM月dd日"
        value-format="yyyy-MM-dd"
        align="left"
        unlink-panels
        range-separator="至"
        start-placeholder="授权开始日期"
        end-placeholder="授权结束日期" />
      <el-select v-model="pro_name" style="width:320px" class="filter-item" filterable clearable placeholder="请选择项目">
        <el-option v-for="item in proData" :key="item.id" :label="item.project_name" :value="item.project_name"/>
      </el-select>
      <el-select v-model="auth_type" class="filter-item" filterable clearable placeholder="请选择授权类型">
        <el-option v-for="item in authTypeData" :key="item.id" :label="item.name" :value="item.name"/>
      </el-select>
      <el-select v-model="oem_name" class="filter-item" filterable clearable placeholder="请选择交换机类型">
        <el-option v-for="item in switchTypeData" :key="item.id" :label="item.name" :value="item.name"/>
      </el-select>
      <el-select v-model="progress" class="filter-item" filterable clearable placeholder="请选择项目进度">
        <el-option v-for="item in proSpeedData" :key="item.id" :label="item.name" :value="item.name"/>
      </el-select>
      <el-select v-model="smanager" class="filter-item" filterable clearable placeholder="请选择销售负责人">
        <el-option v-for="item in saleUserOptions" :key="item.id" :label="`${item.username}(${item.usercode})`" :value="item.username"/>
      </el-select>
      <el-select v-model="pexecutor" class="filter-item" filterable clearable placeholder="请选择项目实施人">
        <el-option v-for="item in proUserOptions" :key="item.id" :label="`${item.username}(${item.usercode})`" :value="item.username"/>
      </el-select>
      <el-select v-model="pmanager" class="filter-item" filterable clearable placeholder="请选择产品负责人">
        <el-option v-for="item in prodUserOptions" :key="item.id" :label="`${item.username}(${item.usercode})`" :value="item.username"/>
      </el-select>
      <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_search">搜索</el-button>
      <el-button v-permission="'HY_add'" type="primary" class="filter-item" icon="el-icon-plus" @click="btn_add">添加</el-button>
      <el-button v-permission="'HY_import'" type="primary" class="filter-item" @click="btn_import"><svg-icon icon-class="daoru" />导入</el-button>
      <el-button v-permission="'HY_deletes'" type="primary" class="filter-item" icon="el-icon-delete" @click="btn_deletes">批量删除</el-button>
    </div>

    <el-table v-loading="loading" :data="dataLists" border stripe @selection-change="changeSelects">
      <el-table-column type="selection" width="40"/>
      <el-table-column type="index" label="编号" align="center" fixed width="50" />
      <el-table-column prop="pro_name" label="项目名称" align="center" min-width="300" />
      <el-table-column label="是否到期" align="center">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.isend | isendTypeFilter"
            size="mini"
            disable-transitions>
            {{ scope.row.isend | isendFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="auth_type" label="授权类型" align="center" />
      <el-table-column prop="oem_name" label="交换机类型" align="center" min-width="90" />
      <el-table-column prop="authendtime" label="授权到期时间" align="center" min-width="140" />
      <el-table-column prop="auth_code" label="软授权码" align="center" />
      <el-table-column prop="auth_num" label="授权数量" align="center" />
      <el-table-column prop="pro_progress" label="项目进度" align="center" />
      <el-table-column prop="sale_manager" label="销售负责人" align="center" min-width="90" />
      <el-table-column prop="pro_executor" label="项目实施人" align="center" min-width="90" />
      <el-table-column prop="product_manager" label="产品负责人" align="center" min-width="90" />
      <el-table-column prop="finance_manager" label="财务负责人" align="center" min-width="90" />
      <el-table-column prop="general_manager" label="总经理" align="center" />
      <el-table-column label="情况备注" prop="content" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.content | formatterContent }}
        </template>
      </el-table-column>
      <el-table-column prop="createuser" label="创建人" align="center" />
      <el-table-column prop="createtime" label="创建时间" align="center" min-width="140" />
      <el-table-column label="操作" width="106" align="left" class-name="oparate_btn" fixed="right">
        <template slot-scope="scope">
          <el-button v-permission="'HY_detail'" type="text" @click="btn_detail(scope.row.id)">详情</el-button>
          <el-button v-permission="'HY_edit'" type="text" @click="btn_edit(scope.row.id)">编辑</el-button>
          <el-button v-permission="'HY_delete'" type="text" @click="btn_delete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="pageParams.total > 0"
      :total="pageParams.total"
      :pageindex.sync="pageParams.pageindex"
      :pagesize.sync="pageParams.pagesize"
      class="pagination"
      @pagination="getList" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination' // 对el-pagination 二次封装
import { pickerOptions } from '@/utils'
import { getDictionary, getPro } from '@/api/commonAPI'
import { getUserSelects } from '@/api/systemSetup/roleSetting/userManage'
import { getAuthLists, deleteAuth } from '@/api/authorization/authorList'
import { formatterContent } from '@/filters'
import addOrEdit from '../components/addOrEdit'
import detail from '../components/detail'
import importAuth from '../components/importAuth'

export default {
  name: 'AuthorList',
  components: {
    Pagination
  },
  filters: {
    isendFilter(status) {
      const statusMap = {
        0: '未到期',
        1: '到期'
      }
      return statusMap[status]
    },
    isendTypeFilter(status) {
      const statusMap = {
        0: 'success',
        1: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      loading: false,
      multipleSelection: [], // 选中的数据
      pickerOptions,
      isend: '', // （到期传1，否则传0）
      authDate: '', // 授权日期
      pro_name: '', //  项目名称
      auth_type: '', // 授权类型
      oem_name: '', // 交换机类型
      stime: '', // 授权到期日期（起始）
      etime: '', //  授权到期日期（截止）
      progress: '', // 项目进度
      smanager: '', // 销售负责人
      pexecutor: '', // 项目实施人
      pmanager: '', // 产品负责人
      pageParams: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0 // 总共多少数据
      },
      proData: [], // 项目下拉数据
      authTypeData: [], // 授权类型下拉数据
      switchTypeData: [], // 交换机类型下拉数据
      proSpeedData: [], // 项目进度下拉数据
      saleUserOptions: [], // 销售负责人下拉数据
      proUserOptions: [], // 项目实施人下拉数据
      prodUserOptions: [], // 产品负责人下拉数据
      dataLists: [] // 列表数据
    }
  },
  computed: {
    ...mapGetters([
      'usercode' // 工号
    ])
  },
  created() {
    this.getProSelect() // 获取项目下拉
    this.getTypeSelect('SQLX') // 获取授权类型下拉
    this.getTypeSelect('JHJLX') // 获取交换机类型下拉
    this.getTypeSelect('XMJD') // 获取项目进度下拉
    this.getUserSelect('5c47d992d2bc5f5d5907f2a0') // 销售负责人下拉
    this.getUserSelect('5c47d983d2bc5f5d5907f29e') // 项目实施人下拉
    this.getUserSelect('5c47d9a1d2bc5f5d5907f2a2') // 产品负责人下拉
    this.getList()
    document.onkeyup = e => {
      if (e.keyCode === 13) {
        this.getList()
      }
    }
  },
  methods: {
    getList() {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          pageindex: this.pageParams.pageindex, // int 第几页
          pagesize: this.pageParams.pagesize, // int 每页几条信息
          stime: this.authDate && this.authDate[0], // 授权到期日期（起始）
          etime: this.authDate && this.authDate[1], // 授权到期日期（截止）
          isend: this.isend, // （到期传1，否则传0）
          pro_name: this.pro_name, //  项目名称
          auth_type: this.auth_type, // 授权类型
          oem_name: this.oem_name, // 交换机类型
          progress: this.progress, // 项目进度
          smanager: this.smanager, // 销售负责人
          pexecutor: this.pexecutor, // 项目实施人
          pmanager: this.pmanager // 产品负责人
        }
        getAuthLists(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.pageParams.total = response.total
            this.dataLists = response.rows
          }
        })
        resolve()
      })
    },
    // 复选框状态改变
    changeSelects(val) {
      this.multipleSelection = val
    },
    btn_search() {
      this.pageParams.pageindex = 1
      this.getList()
    },
    btn_add() {
      this.$layer.iframe({
        content: {
          content: addOrEdit, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': '' } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['80%', '90%'],
        title: '添加项目授权信息'
      })
    },
    btn_edit(editId) {
      this.$layer.iframe({
        content: {
          content: addOrEdit, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': editId } // props
        },
        area: ['80%', '90%'],
        title: '编辑项目授权信息'
      })
    },
    btn_detail(editId) {
      this.$layer.iframe({
        content: {
          content: detail, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': editId } // props
        },
        area: ['65%', '70%'],
        title: '项目授权信息详情'
      })
    },
    btn_import() {
      this.$layer.iframe({
        content: {
          content: importAuth, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': '' }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['40%', '380px'],
        shadeClose: false,
        title: '导入项目授权信息'
      })
    },
    // 批量删除
    btn_deletes() {
      const ids = []
      for (let i = 0, len = this.multipleSelection.length; i < len; i++) {
        ids.push(this.multipleSelection[i].id)
      }
      if (ids.length <= 0) {
        this.$message.warning('没有可删除的选项')
        return
      }
      this.btn_delete(ids)
    },
    btn_delete(editId) {
      this.$confirm('您确定要将此项目授权信息删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteAuth(editId).then(response => {
            if (response.state.toLowerCase() === 'success') {
              this.getList()
              this.$message.success('删除成功!')
            }
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 获取项目下拉
    getProSelect() {
      return new Promise(resolve => {
        getPro().then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.proData = response.data.rows
          }
        })
        resolve()
      })
    },
    // 获取类型下拉
    getTypeSelect(code) {
      return new Promise(resolve => {
        getDictionary(code).then(response => {
          if (response.state.toLowerCase() === 'success') {
            switch (code) {
              case 'SQLX':
                this.authTypeData = response.data // 获取授权类型
                break
              case 'JHJLX':
                this.switchTypeData = response.data // 获取交换机类型
                break
              case 'XMJD':
                this.proSpeedData = response.data // 获取项目进度
                break
              default:
                break
            }
          }
        })
        resolve()
      })
    },
    // 获取负责人下拉
    getUserSelect(code) {
      return new Promise(resolve => {
        getUserSelects(code).then(response => {
          if (response.state.toLowerCase() === 'success') {
            switch (code) {
              case '5c47d992d2bc5f5d5907f2a0':
                this.saleUserOptions = response.data// 销售负责人下拉数据
                break
              case '5c47d983d2bc5f5d5907f29e':
                this.proUserOptions = response.data// 项目实施人下拉数据
                break
              case '5c47d9a1d2bc5f5d5907f2a2':
                this.prodUserOptions = response.data// 产品负责人下拉数据
                break

              default:
                break
            }
          }
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
