<template>
  <div class="priority-setting-list">
    <div class="add-btn-wrap">
      <el-button type="primary" @click="handleModifyPriority('add',{})">添加产品</el-button>
    </div>
    <div class="setting-table">
      <el-table :data="tableData" border @sort-change="sortChangeHandle">
        <el-table-column v-for="item in tableColumns" 
          :label="item.label"
          :key="item.key"
          :prop="item.key"
          :sortable="item.key==='Level'?'custom':false"
          align="center">
          <template slot-scope="{row}">
            <span v-if="item.key==='Level'">
              {{levelOptions[row['Level']-1].label}}
            </span>
            <span v-else>{{row[item.key]||'--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <span
              style="cursor: pointer; font-size: 14px; color: #409eff;margin-right:15px;"
              @click="handleModifyPriority('edit',row)"
              >编辑</span>
            <span
              style="cursor: pointer; font-size: 14px; color: #D1433A"
              @click="deleteSetting(row)"
              >删除</span>
          </template>
        </el-table-column>
        <div slot="empty" class="table-noData">
           <tableNoData text="暂无数据" size="mini"/>
        </div>
      </el-table>
    </div>
    <m-page
      :page_no="pageNo"
      :pageSize="pageSize"
      :total="total"
      style="position: absolute; right: 50px; bottom: 50px"
      @handleCurrentChange="changePage"
    />
    <!-- 添加/编辑产品弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="isSettingDialogShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="592px"
      @closed="closeDialog"
    >
    <div class="dialog-container">
      <el-form :model="settingItem" :rules="formRules" ref="priorityForm">
        <el-form-item label="产品类型" prop="ConfigType">
          <el-select placeholder="请选择产品类型" :disabled="modifyType==='edit'"
            v-model="settingItem.ConfigType"  @change="handleSelectChange">
              <el-option v-for="productType in productTypeOptions" :key="productType.id"
                :label="productType.label" :value="productType.label"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="产品名称" prop="ClassifyName">
          <template v-if="settingItem.ConfigType==='研报'&&modifyType==='add'">
            <el-cascader 
            placeholder="请选择产品名称"
            v-model="settingItem.ClassifyName" 
            :options="productNameOptions"
            :props="{value:'key',label:'label'}"
            >
            </el-cascader>
          </template>
          <template v-else>
            <el-select placeholder="请选择产品类型" :disabled="modifyType==='edit'" v-model="settingItem.ClassifyName">
              <el-option v-for="productName in productNameOptions" :key="productName.key"
                :label="productName.label" :value="productName.key"
              />
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="优先类型" prop="Level">
          <el-select placeholder="请选择优先类型" v-model="settingItem.Level">
              <el-option v-for="level in levelOptions" :key="level.key"
                :label="level.label" :value="level.key"
              />
            </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="foot-container">
        <el-button type="primary" @click="saveChange">保 存</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mPage from '@/components/mPage.vue';
import {pushSettingInterface} from '@/api/modules/pushSettingApi.js';
import {classifylist,interactiveInterface} from '@/api/api.js';
export default {
  name:'PrioritySettingList',
  components:{mPage},
  data() {
    return {
      tableColumns:[
        {label:'产品名称',key:'ClassifyName',minWidth:''},
        {label:'产品类型',key:'ConfigType',minWidth:''},
        {label:'优先类型',key:'Level',minWidth:''},
        {label:'更新时间',key:'ModifyTime',minWidth:''},
      ],
      tableData:[],
      total:0,
      pageNo:1,
      pageSize:10,
      sortOption:{SortParam:'',SortType:''},
      settingItem:{
        ClassifyName:'',
        ConfigType:'',
        Level:'',
        ConfigId:0
      },
      isSettingDialogShow:false, 
      productTypeOptions:[
        {id:1,label:'研报'},
        {id:2,label:'语音播报'},
        {id:3,label:'视频社区'},
        {id:4,label:'线上路演'},
      ],//现可推送的产品:研报、语音播报、视频社区、线上路演
      productNameOptions:[],//根据productType取相应值
      levelOptions:[
        {key:1,label:'紧急'},
        {key:2,label:'优先'},
        {key:3,label:'普通'}
      ],
      title:'添加产品',
      modifyType:'add',
      formRules:{
        ClassifyName: [
            { required: true, message: '请选择产品', trigger: 'change' }
        ],
        ConfigType: [
            { required: true, message: '请选择产品类型', trigger: 'change' }
        ],
        Level: [
            { required: true, message: '请选择优先级', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    handleModifyPriority(type,data){
      this.modifyType = type
      this.productNameOptions=[]
      if(type==='add'){
        this.title = '添加产品'
        this.settingItem={ClassifyName:'',ConfigType:'',Level:'',ConfigId:0}
      }else{
        this.title='编辑优先类型'
        const {ClassifyName,ConfigType,Level,ConfigId} = data
        this.settingItem = {ClassifyName,ConfigType,Level,ConfigId}
      }
      this.isSettingDialogShow = true 
    },
    deleteSetting(data){
      this.$confirm('删除后不可恢复，确认删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const {ConfigId} = data
          pushSettingInterface.deletePriority({ConfigId}).then((res)=>{
            if(res.Ret!==200) return 
            this.$message.success('删除成功')
            this.changePage(1)
          })
        })
    },
    getTableData(){
      const {SortParam, SortType} = this.sortOption
      pushSettingInterface.getPriorityList({
        SortParam,SortType,
        CurrentIndex:this.pageNo,
        PageSize:this.pageSize
      }).then(res=>{
        if(res.Ret!==200) return 
        const {Paging,List} = res.Data
        this.tableData = List||[]
        this.total = Paging.Totals
      })
    },
    changePage(page){
      this.pageNo=page
      this.getTableData()
    },
    sortChangeHandle({ prop,order }){
      let SortParam='',SortType=''
      SortType = order==='ascending'?'asc':order==='descending'?'desc':''
      SortParam = prop==='Level'&&SortType?'level':''
      this.sortOption = {SortParam,SortType}
      this.getTableData()
    },
    //产品类型变化时
    handleSelectChange(){
      const {ConfigType} = this.settingItem
      //重置产品名称的值
      this.$set(this.settingItem,'ClassifyName','')
      this.productNameOptions = []
      //根据ConfigType决定productNameOptions的值
      const configTypeMap = {
        '研报':this.getReportClassify,
        '语音播报':this.getVoiceClassify
      }
      if(configTypeMap[ConfigType]){
        configTypeMap[ConfigType]()
      }else{
        this.productNameOptions = [{key:0,label:ConfigType}]
      }
    },
    //获取研报的分类列表,转换结构后赋值给productNameOptions
    getReportClassify(){
      classifylist({
        CurrentIndex: 0, PageSize: 1000,
      }).then(res=>{
        if(res.Ret!==200||!Array.isArray(res.Data.List)) return
        let tempArr = []
        res.Data.List.forEach(item=>{
          let tempItem = {
            key:item.Id,
            label:item.ClassifyName,
          }
          if(item.Child&&item.Child.length>0){
            tempItem.children = []
            item.Child.forEach(i=>{
              let tempI = {
                key:i.Id,
                label:i.ClassifyName
              }
              tempItem.children.push(tempI)
            })
          }
          tempArr.push(tempItem)
        })
        this.productNameOptions = tempArr
      })
    },
    //获取语音播报板块列表,转换结构后赋值给productNameOptions
    getVoiceClassify(){
      interactiveInterface.voiceList({
        CurrentIndex: this.page_no,
				PageSize:1000
      }).then(res=>{
        if(res.Ret!==200||!Array.isArray(res.Data.List)) return
        let tempArr = []
        res.Data.List.forEach(item=>{
           let tempItem = {
            key:item.SectionId,
            label:item.SectionName,
          }
          tempArr.push(tempItem)
        })
        this.productNameOptions = tempArr
      })
    },
    saveChange(){
      let formValid = null
      this.$refs.priorityForm.validate((valid)=>{formValid = valid})
      if(!formValid) return 
      const {ConfigType,Level,ClassifyName,ConfigId} = this.settingItem
      if(this.modifyType==='edit'){
        pushSettingInterface.editPriority({
          ConfigId,Level
        }).then(res=>{
          if(res.Ret!==200) return 
          this.$message.success('编辑成功')
          this.closeDialog()
          this.changePage(1)
          return
        })
      }else{
        let ClassifyId = 0
        if(ConfigType==='研报'){
          ClassifyId =Number(ClassifyName[ClassifyName.length-1]) 
        }else if(ConfigType==='语音播报'){
          ClassifyId = ClassifyName
        }
        pushSettingInterface.addPriority({
          ConfigType,ClassifyId,Level
        }).then(res=>{
          if(res.Ret!==200) return
          this.$message.success('添加成功')
          this.closeDialog()
          this.changePage(1)
          return
        })
      }
      
    },
    closeDialog(){
      this.settingItem={ClassifyName:'',ConfigType:'',Level:'',ConfigId:0}
      this.$refs.priorityForm.resetFields()
      this.isSettingDialogShow = false
    }
  },
  mounted(){
    this.getTableData()
  }
};
</script>

<style lang="scss">
.priority-setting-list{
  .dialog-container{
    .el-form-item{
      .el-cascader{
        .el-input{
          width: 100%;
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
.priority-setting-list{
  .add-btn-wrap{
    text-align: right;
    position: relative;
    .el-button{
      position:absolute;
      right:0;
      top:-70px;
    }
  }
  .setting-table{
    .table-noData{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 18vh 0;
      img{
        height: 110px;
        width: 136px;
      }
      span{
        font-weight: 400;
        font-size: 16px;
        color: #999999;
      }
    }
  }
  .dialog-container{
    .el-form{
      .el-form-item{
        display: flex;
        justify-content: center;
      }
    }
  }
  .foot-container{
    text-align: center;
  }
}
</style>
