<template>
  <div class="problem-container">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="问题单号">
        <el-input
          clearable
          v-model="searchParam.questionNo"
          size="small"
          placeholder="请输入问题单号"
          style="width: 150px"
        />
      </el-form-item>
      <el-form-item label="区划">
        <driverAreaSelect v-model="searchParam.driverArea"></driverAreaSelect>
      </el-form-item>
      <el-form-item label="河湖名称">
        <el-input
          clearable
          v-model="searchParam.driverName"
          size="small"
          placeholder="请输入河道名称"
          style="width: 150px"
        />
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          style="width: 220px"
          placeholder="日期"
          clearable
          size="small"
          value-format="yyyy-MM-dd"
          v-model="searchParam.inspectTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="tableLoading"
          @click="search"
          size="small"
          icon="el-icon-search"
          type="primary"
        >搜索
        </el-button>
        <el-button
          @click="initSearchParam();search()"
          icon="el-icon-refresh-right"
          type="primary"
          size="small"
          style="background-color: #fff; border: 1px solid #ccc ; color: #666"
        >清空
        </el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-button @click="assignList" v-if="btnRule.inspectquestion_assign&&(status==1||status==='0')"
                 :disabled="multipleSelection.length>0?false:true" size="small" type="primary">批量指派
      </el-button>
      <el-button @click="signList" v-if="btnRule.inspectquestion_finished&&(status==1||status==='0'||status==2)"
                 :disabled="multipleSelection.length>0?false:true" size="small" type="success">批量标记完成
      </el-button>
    </div>
    <el-table
      style="margin-top: 15px"
      stripe
      @selection-change="handleSelectionChange"
      ref="table"
      :height="tableHeight"
      v-loading="tableLoading"
      :data="dataList"
      size="medium"
      border
    >
      <el-table-column
        :selectable="filterSelectable"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center"/>
      <el-table-column
        show-overflow-tooltip
        prop="name"
        label="问题单号"
        align="center"
        min-width="120"
      >
        <template slot-scope="scoped">
          <a
            v-if="btnRule.inspectquestion_detail"
            href="javascript:void(0);"
            @click="handleEdit(scoped.row,1)"
          >{{scoped.row.questionNo}}</a>
          <span v-else>{{scoped.row.questionNo}}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="问题图片" align="center" min-width="80">
        <template slot-scope="{row}">
          <img style="width:20px;height:20px" :src="row.fileSrc"/>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="driverAreaName"
        label="区划"
        align="center"
        min-width="80"
      />
      <el-table-column
        show-overflow-tooltip
        prop="driverName"
        label="河湖名称"
        align="center"
        min-width="100"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="inspectTime"
        label="巡检时间"
        min-width="120"
        align="center"
      />
      <el-table-column show-overflow-tooltip prop="questionType" label="问题类型" align="center"/>
      <el-table-column show-overflow-tooltip prop="statusName" label="问题状态" align="center"/>
      <el-table-column label="操作" align="left" width="180">
        <template slot-scope="scope">
          <el-button v-if="btnRule.inspectquestion_assign&&scope.row.status==1" type="primary" size="mini"
                     icon="el-icon-s-operation" @click="assign(scope.row)">指派
          </el-button>
          <el-button v-if="btnRule.inspectquestion_dealWith&&scope.row.status==2&&scope.row.assignUser==info.id"
                     type="primary" size="mini"
                     icon="el-icon-monitor" @click="handle(scope.row)">处理
          </el-button>
          <el-button v-if="btnRule.inspectquestion_finished&&(scope.row.status==1||scope.row.status==2)" type="success"
                     size="mini" icon="el-icon-finished" @click="sign(scope.row)">标记完成
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page-current">
      <el-pagination
        background
        :current-page="currentPage"
        :page-size="pageSize"
        prev-text="上一页"
        next-text="下一页"
        layout="total, prev, pager, next, jumper"
        style="display: inline-block;"
        @current-change="handleCurrentChange"
        :total="count"
      />
    </div>
    <el-drawer
      class="detail-diaog"
      title="问题详情"
      :visible.sync="visible"
      :direction="direction"
      :size="drawerWidth"
      :before-close="beforeClose"
    >
      <detailDialog @handleClose="visible=false" :visible="visible" v-if="visible" :id="id"></detailDialog>
      <div style="width: 100%;text-align: center;margin-top: 20px;margin-bottom: 20px">
        <el-button size="medium" icon="el-icon-back" @click="visible=false">返回</el-button>
      </div>
    </el-drawer>
    <el-dialog v-if="signVisible" :close-on-press-escape="false" :close-on-click-modal="false" ref="signDialog"
               top="5vh" center title="标记完成"
               class="sign-dialog" :visible.sync="signVisible">
      <el-form ref="ruleForm" :model="ruleForm" size="small" label-width="100px"
               class="form">
        <div style="display: flex;align-items: center;margin-left: 100px;margin-bottom: 30px;font-size: 20px">
          <i style="font-size:28px;margin-right:10px;color: #FFAA15" class="el-icon-warning-outline"></i>确定手动标记完成？
        </div>
        <el-form-item label="备注" prop="note">
          <el-input
            rows="4"
            type="textarea"
            placeholder="备注"
            v-model="ruleForm.note"
            maxlength="99"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer no-print">
              <el-button :loading="submitLoading" @click="signSubmit('ruleForm')" type="primary" size="medium"
                         icon="el-icon-printer">提交</el-button>
                  <el-button size="medium" icon="el-icon-back"
                             @click="signVisible = false">返回
                  </el-button>
              </span>
    </el-dialog>
    <el-dialog v-if="handleVisible" :close-on-press-escape="false" :close-on-click-modal="false" ref="handleDialog"
               top="5vh" center title="问题处理"
               class="handle-dialog" :visible.sync="handleVisible">
      <el-form ref="ruleForm" :model="ruleForm" size="small" label-width="120px"
               class="form">
        <el-form-item label="上传处理后图片" prop="handlerImage">
          <uploadImage v-model="ruleForm.handlerImage"></uploadImage>
        </el-form-item>
        <el-form-item label="处理情况" prop="handlerResult">
          <el-input
            rows="4"
            type="textarea"
            placeholder="备注"
            v-model="ruleForm.handlerResult"
            maxlength="99"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer no-print">
              <el-button :loading="submitLoading" @click="handleSubmit('ruleForm')" type="primary" size="medium"
                         icon="el-icon-printer">提交</el-button>
                  <el-button size="medium" icon="el-icon-back"
                             @click="handleVisible = false">返回
                  </el-button>
              </span>
    </el-dialog>
    <assignDialog v-if="assignVisible"
                  :visible="assignVisible"
                  :ruleForm="ruleForm"
                  @submitSuccess="assignVisible=false;getAllList()"
                  @goBack="assignVisible=false"
    >
    </assignDialog>
  </div>
</template>

<script>
  import api from "@/api/question/list";
  import driverAreaSelect from "@/components/driverAreaSelect";
  import detailDialog from "./detailDialog";
  import {mapGetters} from "vuex";
  import uploadImage from '@/components/uploadImage'
  import assignDialog from '@/components/assignDialog'

  export default {
    name: "problem-container",
    data() {
      return {
        handleVisible: false,
        signVisible: false,
        submitLoading: false,
        assignVisible: false,
        drawerWidth: document.body.clientWidth - 190 + "px",
        direction: "rtl",
        id: "",
        visible: false,
        typeList: {
          1: "待指派",
          2: "处理中",
          3: "已完成"
        },
        searchParam: {
          questionNo: "",
          driverName: "",
          inspectTime: "",
          driverArea: ""
        },
        ruleForm: {},
        dataList: [],
        currentPage: 1,
        pageSize: parseInt((document.body.clientHeight - 365 - 43) / 47),
        count: 0,
        tableLoading: false,
        tableHeight: document.body.clientHeight - 365,
        multipleSelection: [],
        userList: [],
        ids: ''
      };
    },
    components: {driverAreaSelect, detailDialog, uploadImage, assignDialog},
    computed: {
      ...mapGetters(["btnRule", "info"])
    },
    props: {
      status: {
        type: String,
        default() {
          return ''
        }
      }
    },
    created() {
      // console.log(this.info.id)
    },
    mounted() {
      this.tableLoading = true;
      let me = this;
      me.getAllList();
    },
    watch: {},
    methods: {
      handle(row) {
        this.ruleForm = {
          id: row.id + '',
          handlerImage: [],
          handlerResult: ''
        }
        this.handleVisible = true
      },
      handleSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitLoading = true
            api.dealWith(this.ruleForm).then(res => {
              this.$message({
                type: 'success',
                message: '处理成功！'
              })
              this.submitLoading = false
              this.handleVisible = false
              this.getAllList()
            }).catch(err => {
              this.submitLoading = false
            });
          }
        })
      },
      signSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitLoading = true
            api.finished(this.ruleForm).then(res => {
              this.$message({
                type: 'success',
                message: '标记完成成功！'
              })
              this.submitLoading = false
              this.signVisible = false
              this.getAllList()
            }).catch(err => {
              this.submitLoading = false
            });
          }
        })
      },
      signList() {
        let bl = true
        let ids = []
        this.multipleSelection.map(item => {
          ids.push(item.id)
          if (item.status != 1 && item.status != 2) {
            bl = false
          }
        })
        if (!bl) {
          this.$message({
            type: 'error',
            message: '存在已完成状态数据，无法操作，请重新选择'
          })
        } else {
          this.ruleForm = {
            id: ids.join(','),
            note: '',
          }
          this.signVisible = true
        }
      },
      assignList() {
        let bl = true
        let ids = []
        this.multipleSelection.map(item => {
          ids.push(item.id)
          if (item.status != 1) {
            bl = false
          }
        })
        if (!bl) {
          this.$message({
            type: 'error',
            message: '存在非’待指派‘状态数据，无法操作，请重新选择！'
          })
        } else {
          this.ruleForm = {
            id: ids.join(','),
            assignUser: '',
            assignContact: '',
            assignNote: ''
          }
          this.assignVisible = true
        }
      },
      sign(row) {
        this.ruleForm = {
          id: row.id + '',
          note: ''
        }
        this.signVisible = true
      },
      assign(row) {
        this.ruleForm = {
          id: row.id + '',
          assignUser: '',
          assignContact: '',
          assignNote: ''
        }
        this.assignVisible = true
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      filterSelectable(row, index) {
        return true
      },
      beforeClose() {
        this.visible = false
      },
      handleEdit(row) {
        this.id = row.id;
        this.visible = true;
      },
      indexMethod(index) {
        return index + 1 + (this.currentPage - 1) * this.pageSize;
      },
      getAllList() {
        let searchParam = JSON.parse(JSON.stringify(this.searchParam));
        searchParam.page = this.currentPage;
        searchParam.pageSize = this.pageSize;
        if (searchParam.inspectTime && searchParam.inspectTime.length > 0) {
          searchParam.inspectTime = searchParam.inspectTime[0] + '~' + searchParam.inspectTime[1];
        } else {
          searchParam.inspectTime = ''
        }
        this.$refs.table.clearSelection();
        this.multipleSelection = []
        this.tableLoading = true
        searchParam.status = this.status === '0' ? '' : this.status
        api.getList(searchParam).then(res => {
          this.count = res.data.total;
          this.dataList = res.data.records;
          this.tableLoading = false;
        }).catch(err => {
          this.dataList = [];
          this.tableLoading = false;
        });
      },
      search() {
        this.currentPage = 1;
        this.tableLoading = true;
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.getAllList();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.tableLoading = true;
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.getAllList();
      },
      initSearchParam() {
        this.searchParam = {
          questionNo: "",
          driverName: "",
          inspectTime: "",
          driverArea: ""
        };
      }
    }
  };
</script>

<style lang="less">
  .problem-container {

    .el-input.is-disabled .el-input__inner {
      background-color: #fff !important;
      color: #333 !important;
    }

    .sign-dialog {
      .el-dialog {
        width: 500px !important;
      }
    }

    .handle-dialog {
      .el-dialog {
        width: 60% !important;
      }
    }
  }
</style>
