<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <!--      <el-col :span="1.5">-->
      <!--        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"-->
      <!--          v-hasPermi="['cs:csResourceOrderApply:add']">新增</el-button>-->
      <!--      </el-col>-->
      <!--      <el-col :span="1.5">-->
      <!--        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"-->
      <!--          v-hasPermi="['cs:csResourceOrderApply:edit']">修改</el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['cs:csResourceOrderApply:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['cs:csResourceOrderApply:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button plain size="mini" @click="handleSearch">高级搜索</el-button>
      </el-col>
      <el-col :span="8">
        <span style="padding-right: 10px;">表格设置</span>
        <el-select v-model="tableHeaderList" multiple collapse-tags placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <div v-if="showSearch" class="searchForm">

      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="关键词">
          <el-input placeholder="请输入关键词" v-model="queryParams.keyword" />
        </el-form-item>
        <el-form-item label="申请类型" prop="orderClassName">
          <el-select v-model="queryParams.applyType" placeholder="请选择申请类型" clearable>
            <el-option label="资源" value="0"></el-option>
            <el-option label="工单" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请单号" prop="applyNumber">
          <el-input v-model="queryParams.applyNumber" placeholder="请输入申请单号" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="单位名称" prop="companyName">
          <el-input v-model="queryParams.companyName" placeholder="请输入单位名称" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="二级单位" prop="deptName">
          <el-input v-model="queryParams.deptName" placeholder="请输入部门/院系名称" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="资源类型" prop="resourceClassId">
          <el-select v-model="queryParams.resourceClassId" placeholder="请选择资源类型" clearable>
            <el-option v-for="(item, index) in resourceClassList" :key="index" :label="item.className"
              :value="item.classId" />
          </el-select>
        </el-form-item>
        <el-form-item label="工单类型" prop="orderClassId">
          <el-select v-model="queryParams.orderClassId" placeholder="请选择工单类型" clearable>
            <el-option v-for="(item, index) in orderClassList" :key="index" :label="item.className"
              :value="item.classId" />
          </el-select>
        </el-form-item>
        <el-form-item label="工单状态" prop="applyStatus">
          <el-select v-model="queryParams.applyStatus" placeholder="请选择工单状态" clearable>
            <el-option v-for="(item, index) in orderStatusList" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="工单账号" prop="email">
          <el-input v-model="queryParams.email" placeholder="请输入E-mail/联系邮箱" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="评价类型" prop="evaluateStar">
          <el-select v-model="queryParams.evaluateStar" placeholder="请选择工单类型" clearable>
            <el-option v-for="(item, index) in texts" :key="index" :label="item" :value="index + 1" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="queryParams.phone" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="queryParams.email" placeholder="请输入邮箱" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <!-- <el-form-item label="申请时间" prop="email">
        <el-input v-model="queryParams.email" placeholder="请输入申请时间" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="email">
        <el-input v-model="queryParams.email" placeholder="请输入状态" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="评价" prop="email">
        <el-input v-model="queryParams.email" placeholder="请输入评价" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
        <el-form-item label="受理部门" prop="deptId">
          <el-select v-model="queryParams.deptId" placeholder="请选择工单类型" clearable>
            <el-option v-for="(item, index) in departList" :key="index" :label="item.roleName" :value="item.roleId" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-date-picker v-model="queryParams.dateRange" type="daterange" range-separator="-" start-placeholder="开始时间"
            end-placeholder="结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <span style="padding-left: 20px;"></span>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="loading" :data="csResourceOrderApplyList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" fixed="left">
        <template slot-scope="scope">
          {{ ((queryParams.pageNum - 1) * queryParams.pageSize) + (scope.$index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="工单标题" align="center" prop="orderTitle"
        v-if="tableHeaderList.indexOf('orderTitle') != -1" />
      <el-table-column label="工单编号" align="center" prop="applyNumber" show-overflow-tooltip
        v-if="tableHeaderList.indexOf('applyNumber') != -1" />
      <el-table-column label="申请类型" align="center" prop="applyType" v-if="tableHeaderList.indexOf('applyType') != -1">
        <template slot-scope="scope">
          <span>{{ scope.row.applyType == 0 ? '资源' : '工单' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工单类型" align="center" prop="resourceClassName"
        v-if="tableHeaderList.indexOf('resourceClassName') != -1" />
      <el-table-column label="工单描述" align="center" prop="demandContent" show-overflow-tooltip
        v-if="tableHeaderList.indexOf('demandContent') != -1">
        <template slot-scope="scope">
          <span>{{ scope.row.applyType == 0 ? scope.row.demandContent : scope.row.problemDescribe }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" align="center" prop="createAt" width="180"
        v-if="tableHeaderList.indexOf('createAt') != -1">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工单账号" align="center" prop="orderAccount"
        v-if="tableHeaderList.indexOf('emailName') != -1" />
      <el-table-column label="单位名称" align="center" prop="companyName"
        v-if="tableHeaderList.indexOf('companyName') != -1" />
      <el-table-column label="真实姓名" align="center" prop="name" v-if="tableHeaderList.indexOf('name') != -1" />
      <el-table-column label="手机号" align="center" prop="phone" v-if="tableHeaderList.indexOf('phone') != -1" />
      <el-table-column label="邮箱" align="center" prop="email" v-if="tableHeaderList.indexOf('email') != -1" />
      <!-- <el-table-column label="用户来源" align="center" prop="deptId" />
      <el-table-column label="用户标签" align="center" prop="deptId" />
      <el-table-column label="资源信息" align="center" prop="deptId" /> -->
      <el-table-column label="状态" align="center" prop="applyStatus" v-if="tableHeaderList.indexOf('applyStatus') != -1">
        <template slot-scope="scope">
          <!-- ：0-待确认,1-盖章材料待上传,2-待审批,3-审批拒绝,4-待审核,5-审核拒绝,6-待分配,7-进行中,8-驳回,9-已完成 -->
          <span v-if="scope.row.applyStatus == 0">待确认</span>
          <span v-if="scope.row.applyStatus == 1">盖章材料待上传</span>
          <span v-if="scope.row.applyStatus == 2">待审批</span>
          <span v-if="scope.row.applyStatus == 3">审批拒绝</span>
          <span v-if="scope.row.applyStatus == 4">待审核</span>
          <span v-if="scope.row.applyStatus == 5">审核拒绝</span>
          <span v-if="scope.row.applyStatus == 6">待分配</span>
          <span v-if="scope.row.applyStatus == 7">进行中</span>
          <span v-if="scope.row.applyStatus == 8">驳回</span>
          <span v-if="scope.row.applyStatus == 9">已完成</span>
        </template>
      </el-table-column>
      <el-table-column label="评价" align="center" prop="evaluateStar"
        v-if="tableHeaderList.indexOf('evaluateStar') != -1">
        <template slot-scope="scope">
          {{ scope.row.evaluateStar == 0 ? '未评价' : scope.row.evaluateStar == 1 ? '很不满意'
            : scope.row.evaluateStar == 2 ? '不太满意' : scope.row.evaluateStar == 3 ? '一般'
              : scope.row.evaluateStar == 4 ? '比较满意' : scope.row.evaluateStar == 5 ? '很满意' : '' }}
        </template>
      </el-table-column>
      <el-table-column label="评价内容" align="center" prop="content"
        v-if="tableHeaderList.indexOf('content') != -1"></el-table-column>
      <el-table-column label="受理部门" align="center" prop="deptName" v-if="tableHeaderList.indexOf('deptName') != -1" />
      <!-- <el-table-column label="受理人员" align="center" prop="deptId" />
      <el-table-column label="处理时长" align="center" prop="deptId" />
      <el-table-column label="解决方法" align="center" prop="deptId" />
      <el-table-column label="处理结果" align="center" prop="deptId" />
      <el-table-column label="处理备份" align="center" prop="deptId" />
      <el-table-column label="备注" align="center" prop="deptId" /> -->
      <el-table-column label="操作" align="center" fixed="right" width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
            v-hasPermi="['cs:csResourceOrderApply:query']"
            v-if="scope.row.applyStatus == 9 || scope.row.applyStatus == 5 || scope.row.applyStatus == 0 || scope.row.applyStatus == 8">查看</el-button>
          <!-- <el-button size="mini" type="text" v-hasPermi="['cs:csResourceOrderApply:query']"
            v-if="scope.row.applyStatus == 9 && scope.row.evaluateStar == '0'"">待评价</el-button> -->
          <el-button size=" mini" type="text" style="color: red;" @click="handleUpdate(scope.row)"
            v-hasPermi="['cs:csResourceOrderApply:edit']" v-if="scope.row.applyStatus == 2">触发</el-button>
          <el-button size="mini" type="text" style="color: red;" @click="handleUpdate(scope.row)"
            v-hasPermi="['cs:csResourceOrderApply:edit']" v-if="scope.row.applyStatus == 4">审核</el-button>
          <el-button size="mini" type="text" style="color: red;" @click="handleUpdate(scope.row)"
            v-hasPermi="['cs:csResourceOrderApply:edit']" v-if="scope.row.applyStatus == 6">委派</el-button>
          <el-button size="mini" type="text" style="color: red;" @click="handleUpdate(scope.row)"
            v-hasPermi="['cs:csResourceOrderApply:edit']" v-if="scope.row.applyStatus == 7">处理工单</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)"
            v-hasPermi="['cs:csResourceOrderApply:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
  import {
    listCsResourceOrderApply,
    getCsResourceOrderApply,
    delCsResourceOrderApply,
    addCsResourceOrderApply,
    updateCsResourceOrderApply,
    getClassListByMark
  } from "@/api/cs/csResourceOrderApply";

  import { listRole } from "@/api/system/role";
  import { mount } from "sortablejs";

  export default {
    name: "WorkOrderManagement",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        orderTitles: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 资源、工单申请表格数据
        csResourceOrderApplyList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 删除标记：0-正常，1-删除时间范围
        daterangeCreateAt: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          applyType: '',
          applyNumber: null,
          resourceClassId: null,
          resourceClassName: '',
          companyName: null,
          deptName: null,
          companyClassId: null,
          companyClassName: null,
          name: null,
          professionalTitle: null,
          occupation: null,
          phone: null,
          email: null,
          projectName: null,
          projectNumber: null,
          projectSource: null,
          projectClassId: null,
          projectClassName: null,
          projectCycle: null,
          majorField: null,
          useDemand: null,
          workloadEstimate: null,
          contractName: null,
          contractNumber: null,
          contractAnnex: null,
          demandContent: null,
          orderTitle: null,
          orderClassId: null,
          evaluateStar: null,
          orderClassName: null,
          problemDescribe: null,
          applyStatus: null,
          status: null,
          isDraft: null,
          keyword: '',
          dateRange: []
        },
        texts: ['很不满意', '不太满意', '一般', '比较满意', '很满意'],
        originalForm: null,
        resourceClassList: [],
        orderClassList: [],
        departList: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        options: [{
          value: 'orderTitle',
          label: '工单标题'
        }, {
          value: 'applyNumber',
          label: '工单编号'
        }, {
          value: 'companyName',
          label: '单位名称'
        }, {
          value: 'applyType',
          label: '申请类型'
        }, {
          value: 'resourceClassName',
          label: '工单类型'
        }, {
          value: 'demandContent',
          label: '工单描述'
        }, {
          value: 'createAt',
          label: '提交时间'
        }, {
          value: 'emailName',
          label: '工单账号'
        }, {
          value: 'name',
          label: '真实姓名'
        }, {
          value: 'phone',
          label: '手机号'
        }, {
          value: 'email',
          label: '邮箱'
        }, {
          value: 'applyStatus',
          label: '状态'
        }, {
          value: 'evaluateStar',
          label: '评价'
        }, {
          value: 'content',
          label: '评价内容'
        }, {
          value: 'deptName',
          label: '受理部门'
        }],
        tableHeaderList: ['orderTitle', 'applyNumber', 'companyName',
          'applyType', 'resourceClassName', 'demandContent', 'createAt',
          'emailName', 'name', 'phone', 'email', 'applyStatus', 'evaluateStar', 'content', 'deptName'
        ],
        showSearch: false,
        // 工单状态
        orderStatusList: [{
            value: '2',
            label: '待审批'
          },
          {
            value: '6',
            label: '待分配'
          },
          {
            value: '7',
            label: '进行中'
          },
          {
            value: '5',
            label: '审核拒绝'
          },
          {
            value: '9',
            label: '已完成'
          }
        ]
      };
    },
    watch: {
      '$route': { // $route可以用引号，也可以不用引号  监听的对象
        handler(to, from) {
          console.log('路由变化了')
          this.getList();
        },
        deep: true, // 深度观察监听 设置为 true
        immediate: true, // 第一次初始化渲染就可以监听到
      }
    },
    created() {
      this.getList();
      this.getResourceClassList()
      this.getDepartList()
      this.originalForm = Object.assign({}, this.queryParams);
    },
    mounted() {},
    methods: {
      /** 查询资源、工单申请列表 */
      getList() {
        this.loading = true
        if (null != this.queryParams.dateRange && '' != this.queryParams.dateRange) {
          this.queryParams["beginCreateAt"] = this.queryParams.dateRange[0];
          this.queryParams["endCreateAt"] = this.queryParams.dateRange[1];
        }
        console.log(this.queryParams)
        listCsResourceOrderApply(this.queryParams).then(response => {
          this.csResourceOrderApplyList = response.rows;
          // console.log(this.csResourceOrderApplyList)
          this.total = response.total;
          this.loading = false;
        });
      },
      handleSearch() {
        this.showSearch = !this.showSearch
      },
      /** 查询部门列表 */
      getDepartList() {
        listRole().then(response => {
          // console.log(response, 111)
          this.departList = response.rows;
        });
      },
      handleChange(value) {
        // console.log(value)
      },
      getResourceClassList() {
        getClassListByMark({ classMark: 'resourceClass' }).then(res => {
          this.resourceClassList = res.data
        })
        getClassListByMark({ classMark: 'orderClass' }).then(res => {
          this.orderClassList = res.data
        })
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          applyId: null,
          applyType: null,
          applyNumber: null,
          resourceClassId: null,
          resourceClassName: null,
          companyName: null,
          deptId: null,
          deptName: null,
          companyClassId: null,
          companyClassName: null,
          name: null,
          professionalTitle: null,
          occupation: null,
          phone: null,
          email: null,
          projectName: null,
          projectNumber: null,
          projectSource: null,
          projectClassId: null,
          projectClassName: null,
          projectCycle: null,
          majorField: null,
          useDemand: null,
          workloadEstimate: null,
          contractName: null,
          contractNumber: null,
          contractAnnex: null,
          demandContent: null,
          orderTitle: null,
          orderClassId: null,
          orderClassName: null,
          problemDescribe: null,
          applyStatus: "0",
          status: "0",
          isDraft: null,
          sort: null,
          isUpload: null,
          uploadUrl: null,
          createAt: null,
          updateAt: null,
          delFlag: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.showSearch = false
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = Object.assign({}, this.originalForm);
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.applyId)
        this.orderTitles = selection.map(item => item.orderTitle)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加资源、工单申请";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        // this.reset();
        const applyId = row.applyId || this.ids
        // console.log(row)
        if (row.applyType == '1') {
          this.$store.commit('SET_workOrderId', { applyId, type: 0 });
          this.$router.push({ name: 'workOrderApplication', params: { applyId, active: 0 } })
        } else {
          this.$router.push({ name: 'hpcApplication', params: { applyId } })
        }
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.applyId != null) {
              updateCsResourceOrderApply(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addCsResourceOrderApply(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const applyIds = row.applyId || this.ids;
        const orderTitles = row.orderTitle || this.orderTitles;
        this.$modal.confirm('是否确认删除工单标题为"' + orderTitles + '"的数据项？').then(function() {
          return delCsResourceOrderApply(applyIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('cs/csResourceOrderApply/exportOrderApplyList', {
          ...this.queryParams
        }, `csResourceOrderApply_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>

<style scoped>
  ::v-deep .dialog1 {
    background-color: #F8F8F8;
  }

  .searchForm {
    width: 650px;
    padding: 20px;
    position: absolute;
    left: 200px;
    z-index: 100;
    background-color: #FFFFFF;
    border: 1px solid #777777;
  }
</style>
