<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
      <el-form-item label="队列名称" prop="queueId">
        <el-select
          v-model="queryParams.queueId"
          clearable
          placeholder="请选择队列"
        >
          <el-option
            :key="0"
            :label="'全部'"
            :value="''"
          />
          <el-option
            v-for="item in queueList"
            :key="item.id"
            :label="item.queueName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否有效" prop="isUsed">
        <el-select v-model="queryParams.isUsed" clearable placeholder="请选择是否有效" size="small">
          <el-option
            v-for="dict in isUsedOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="cyan" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <router-link
          :to="'/addNumTable'"
          style="margin-left: 10px"
        >
          <el-button
            v-hasPermi="['resource:queueBasicNum:add']"
            icon="el-icon-plus"
            size="mini"
            type="primary"
          >
            新增号表
          </el-button>
        </router-link>
        <el-button
          v-hasPermi="['resource:queueBasicNum:edit']"
          :disabled="single"
          icon="el-icon-edit"
          size="mini"
          style="margin-left: 10px"
          type="success"
          @click="handleUpdate"
        >修改
        </el-button>
        <el-button
          v-hasPermi="['resource:queueBasicNum:remove']"
          :disabled="multiple"
          icon="el-icon-delete"
          size="mini"
          type="danger"
          @click="handleDelete"
        >删除
        </el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="10">
        <div id="fatherBox_left">
          <div class="title_box_left">
            <span class="text_left">队列基础号表</span>
          </div>
          <el-table ref="multipleTable"
                    v-loading="loading"
                    :data="queueSetList"
                    border
                    highlight-current-row
                    stripe tooltip-effect="light" @selection-change="handleSelectionChange" @row-click="openChildern"
          >
            <el-table-column align="center" type="selection" width="55"/>
            <el-table-column v-if="false" align="center" label="主键" prop="id"/>
            <el-table-column align="left" label="队列名称" min-width="170" prop="queueName"
                             show-overflow-tooltip
            />
            <!-- <el-table-column label="就诊类型" align="center" prop="visitTypeId" :formatter="formatVisitType"/> -->
            <el-table-column align="center" label="号源生成天数" prop="produceDays" width="110"/>
            <el-table-column align="center" label="是否启用" width="110">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isUsed"
                  :active-value="1"
                  :inactive-value="0"
                  @change="isUsedFormat(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column align="left" label="备注" min-width="230" prop="remarks" show-overflow-tooltip/>
            <!--            <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="120">
                          <template slot-scope="scope">
                            <el-button
                              v-hasPermi="['resource:queueBasicNum:edit']"
                              icon="el-icon-edit"
                              size="mini"
                              type="text"
                              @click="handleUpdate(scope.row)"
                            >修改
                            </el-button>
                            <el-button
                              v-hasPermi="['resource:queueBasicNum:remove']"
                              icon="el-icon-delete"
                              size="mini"
                              type="text"
                              @click="handleDelete(scope.row)"
                            >删除
                            </el-button>
                          </template>
                        </el-table-column>-->
          </el-table>

        </div>
        <pagination
          v-show="total>0"
          :limit.sync="queryParams.pageSize"
          :page.sync="queryParams.pageNum"
          :total="total"
          @pagination="getList"
        />
      </el-col>
      <el-col :span="14">
        <div class="doublebox_right">
          <div class="title_box_right">
            <span class="text_right">基础号表详情（可修改单个时段号源数量）</span>
          </div>
          <div id="fatherBox_right">
            <div class="box_right_childen">
              <queue-basic-num :ref="'numResource'"></queue-basic-num>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 添加或修改队列设置对话框 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="open" append-to-body width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="130px" size="small">
        <el-form-item label="队列" prop="queueName">
          <el-input v-model="form.queueName" :disabled="true" placeholder=""/>
        </el-form-item>
        <el-form-item label="号源生成天数" prop="produceDays">
          <el-input v-model="form.produceDays" placeholder="请输入号源生成天数"/>
        </el-form-item>
        <el-form-item label="预约成功短信">
          <el-radio-group v-model="form.isReserveMsg">
            <el-radio
              v-for="dict in isReserveMsgOptions"
              :key="dict.dictValue"
              :label="parseInt(dict.dictValue)"
            >{{ dict.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自动取消短信">
          <el-radio-group v-model="form.isAutoCancelMsg">
            <el-radio
              v-for="dict in isAutoCancelMsgOptions"
              :key="dict.dictValue"
              :label="parseInt(dict.dictValue)"
            >{{ dict.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手动取消短信">
          <el-radio-group v-model="form.isArtificalCancelMsg">
            <el-radio
              v-for="dict in isArtificalCancelMsgOptions"
              :key="dict.dictValue"
              :label="parseInt(dict.dictValue)"
            >{{ dict.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="强制取消短信">
          <el-radio-group v-model="form.isForcedCancelMsg">
            <el-radio
              v-for="dict in isForcedCancelMsgOptions"
              :key="dict.dictValue"
              :label="parseInt(dict.dictValue)"
            >{{ dict.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="改约短信">
          <el-radio-group v-model="form.isChangeMsg">
            <el-radio
              v-for="dict in isChangeMsgOptions"
              :key="dict.dictValue"
              :label="parseInt(dict.dictValue)"
            >{{ dict.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- <el-form-item label="单时段机动号数量" prop="singleTimeAddSourceCount">
          <el-input v-model="form.singleTimeAddSourceCount" placeholder="请输入上午加号数量" />
        </el-form-item> -->

        <el-form-item label="号表说明" prop="remarks">
          <el-input v-model="form.remarks" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listQueueSet,
  getQueueSet,
  delQueueSet,
  addQueueSet,
  updateQueueSet,
  exportQueueSet,
  changeState
} from '@/api/resource/queueSet'
import { listQueue } from '@/api/resource/queue'
import queueBasicNum from '@/components/QueryQueueSet/index'
import { listVisitType } from '@/api/basis/visitType'

export default {
  name: 'QueueBasicNum',
  components: {
    'queue-basic-num': queueBasicNum
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      //队列
      queueList: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 队列设置表格数据
      queueSetList: [],
      //就诊类型
      vtList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 预约成功短信通知，0为不通知，1为通知。字典
      isReserveMsgOptions: [],
      // 自动取消预约短信通知，0为不通知，1 为通知。字典
      isAutoCancelMsgOptions: [],
      // 手动取消预约短信通知，0为不通知，1为通知。字典
      isArtificalCancelMsgOptions: [],
      // 强制取消预约短信通知，0为不通知，1为通知。字典
      isForcedCancelMsgOptions: [],
      // 改约短信通知，0为不通知，1为通知。字典
      isChangeMsgOptions: [],
      isUsedOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        queueId: null,
        visitTypeId: null,
        isUsed: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    }
  },
  created() {
    this.getVtList()
    this.getQueueList()
    this.getList()
    this.getDicts('notice_status').then(response => {
      this.isReserveMsgOptions = response.data
    })
    this.getDicts('notice_status').then(response => {
      this.isAutoCancelMsgOptions = response.data
    })
    this.getDicts('notice_status').then(response => {
      this.isArtificalCancelMsgOptions = response.data
    })
    this.getDicts('notice_status').then(response => {
      this.isForcedCancelMsgOptions = response.data
    })
    this.getDicts('notice_status').then(response => {
      this.isChangeMsgOptions = response.data
    })
    this.getDicts('sys_yes_no').then(response => {
      this.isUsedOptions = response.data
    })
  },
  methods: {
    /** 查询队列设置列表 */
    getList() {
      this.loading = true
      listQueueSet(this.queryParams).then(response => {
        this.queueSetList = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    getQueueList() {
      this.loading = true
      listQueue().then(response => {
        this.queueList = response.rows
      })
    },
    /** 查询就诊类型列表 */
    getVtList() {
      listVisitType(this.queryParams).then(response => {
        this.vtList = response.rows
      })
    },
    // 预约成功短信通知，0为不通知，1为通知。字典翻译
    isReserveMsgFormat(row, column) {
      return this.selectDictLabel(this.isReserveMsgOptions, row.isReserveMsg)
    },
    // 自动取消预约短信通知，0为不通知，1 为通知。字典翻译
    isAutoCancelMsgFormat(row, column) {
      return this.selectDictLabel(this.isAutoCancelMsgOptions, row.isAutoCancelMsg)
    },
    // 手动取消预约短信通知，0为不通知，1为通知。字典翻译
    isArtificalCancelMsgFormat(row, column) {
      return this.selectDictLabel(this.isArtificalCancelMsgOptions, row.isArtificalCancelMsg)
    },
    // 强制取消预约短信通知，0为不通知，1为通知。字典翻译
    isForcedCancelMsgFormat(row, column) {
      return this.selectDictLabel(this.isForcedCancelMsgOptions, row.isForcedCancelMsg)
    },
    // 改约短信通知，0为不通知，1为通知。字典翻译
    isChangeMsgFormat(row, column) {
      return this.selectDictLabel(this.isChangeMsgOptions, row.isChangeMsg)
    },
    // 是否有效判断，0为未使用，1为使用中。字典翻译
    isUsedFormat(row) {
      //return this.selectDictLabel(this.isUsedOptions, row.isUsed);
      let text = row.isUsed === 1 ? '启用' : '停用'
      this.$confirm(
        '确认要"' + text + '"吗?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(function() {
          let data = { id: row.id, isUsed: row.isUsed, queueId: row.queueId }
          return changeState(data)
        })
        .then(() => {
          this.getList()
          this.msgSuccess(text + '成功')
        })
        .catch(function() {
          row.isUsed = row.isUsed === 1 ? 0 : 1
        })
    },
    openChildern(row) {
      this.$refs.numResource.init(row.id)
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    // formatVisitType(row,column){
    //      var name = "";
    //      var str = row.visitTypeId+"";
    //      let arr = str.split(',');
    //      for(var i=0;i<arr.length;i++){
    //           this.vtList.forEach( item => {
    //               if(item.typeCode == arr[i]){
    //                  if(i < arr.length-1){
    //                    name+=item.typeName+", "
    //                  }else{
    //                    name+=item.typeName
    //                  }
    //               }
    //           });
    //      }
    //      return name;
    // },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        queueId: null,
        visitTypeId: null,
        produceDays: null,
        isReserveMsg: 0,
        isAutoCancelMsg: 0,
        isArtificalCancelMsg: 0,
        isForcedCancelMsg: 0,
        isChangeMsg: 0,
        amStartTime: null,
        amEndTime: null,
        pmStartTime: null,
        pmEndTime: null,
        singleTimeCount: null,
        singleSourceCount: null,
        singleTimeAddSourceCount: null,
        isUsed: null,
        createdAt: null,
        remarks: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
      this.openChildern({ id: -1 })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加队列设置'
    },
    /** 修改按钮操作 跳转到新增号表 */
    handleUpdate() {
      /*this.reset();
      const id = row.id || this.ids
      getQueueSet(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改队列设置";
      });*/
      const id = this.ids[0]
      const data = this.queueSetList.find(item => item.id === id)
      this.$router.push({
        path: '/addNumTable',
        query: {
          queueId: data.queueId
        }
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateQueueSet(this.form).then(response => {
              this.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addQueueSet(this.form).then(response => {
              this.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete() {
      const id = this.ids[0]
      const data = this.queueSetList.find(item => item.id === id)
      this.$confirm('是否确认删除' + data.queueName + '的设置?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delQueueSet(id)
      }).then(() => {
        this.getList()
        this.msgSuccess('删除成功')
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有队列设置数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return exportQueueSet(queryParams)
      }).then(response => {
        this.download(response.msg)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.doublebox_right {
  height: 500px;
  border: 0.3px solid #c0c0c0;
}

.title_box_right {
  height: 45px;
  background: #dbdee5;
  color: #310f1b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  font-size: 17px;
  font-weight: normal;
}

.title_box_left {
  height: 45px;
  background: #dbdee5;
  color: #310f1b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  font-size: 17px;
  font-weight: normal;
}

.title_box_left {
  line-height: 45px;
  padding-left: 15px;
}

.title_box_right {
  line-height: 45px;
  padding-left: 15px;
}

#fatherBox_left {
  min-height: 500px;
  border: 1px solid #c0c0c0;
  margin-right: 10px;
}

.right_liner {
  border: 0.3px solid #c0c0c0;
  background: #f7f7f8;
  display: flex;
  flex-direction: row;
  line-height: 45px;
}

.text_box_left {
  width: 30px;
  height: 45px;
  line-height: 45px;
  border-right: 1px solid #c0c0c0;
}

.text_box_right {
  width: 10px;
  height: 45px;
  line-height: 45px;
  margin-left: 310px;
  border-left: 1px solid #c0c0c0;
}

.spanbox {
  margin-left: 20px;
}

.box_right_childen {
  height: 455px;
  overflow: auto;

  ::v-deep .el-form-item__label {
    //padding: 0;
  }
}

#fatherBox_left {
  border: 1px solid #c0c0c0;
}

#fatherBox_right {
  position: absolute;
  width: 58%;
  height: 455px;
}
</style>
