<template>
  <div class="execution">
    <el-button type="primary" @click="backPage" style="margin-left: 20px;margin-right: 50px;">返回</el-button>

    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @row-save="handleSave"
        @row-del="rowDel"
      >
        <template slot="menu" slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-edit" v-if="scope.row.enableFlag == 1" @click="updateQy(scope.row, scope.index)">启用 </el-button>
          <el-button type="text" size="small" icon="el-icon-edit" v-if="scope.row.enableFlag == 0" @click="updateTy(scope.row, scope.index)">停用 </el-button>
          <!-- <el-button
            type="text"
            size="small"
            icon="el-icon-document"
            @click="taskTipsFn(scope.row, scope.index)"
            >服务要求
          </el-button> -->
        </template>
        <template slot="taskTypeName" slot-scope="scope">
          {{ scope.row.taskTypeName }}
          <el-tooltip class="item" effect="light" placement="bottom-start" popper-class="tip-cls" :visible-arrow="false">
            <div slot="content" class="tip-cont">
              <div class="title">{{ scope.row.taskTypeName }}</div>
              <div class="list">
                <h3>定义</h3>
                <div class="cont">
                  {{ getText(scope.row.taskTypeName) }}
                </div>
              </div>
              <div class="list" v-if="scope.row.taskRemark">
                <h3>服务要求</h3>
                <div class="cont">
                  {{ scope.row.taskRemark }}
                </div>
              </div>
            </div>
            <img src="/images/tips.png" class="tip-img" />
          </el-tooltip>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog title="服务要求" :visible.sync="taskTipVisible" center width="60%" :before-close="taskTipHandleClose">
      <el-form ref="taskTipFormRef" :model="taskTipForm" label-width="80px" :rules="taskTipFormRules">
        <el-form-item label="服务要求" requred prop="taskRemark">
          <el-input type="textarea" v-model="taskTipForm.taskRemark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="taskTipHandleClose">取 消</el-button>
        <el-button type="primary" @click="submitFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {fetchList, fetchLists, getObj, addObj, putObj, delObj, updateTaskRemarkApi} from '@/api/wmtasktype';
import {tableOptionYQ} from '@/const/crud/wmtasktype';
import {mapGetters} from 'vuex';
import {getDictType} from '@/api/common';

export default {
  name: 'wmtasktype',
  data() {
    return {
      map: [],
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOptionYQ,
      taskTipVisible: false,
      currentRow: {},
      taskTipForm: {
        taskRemark: ''
      },
      taskTipFormRules: {
        taskRemark: [{required: true, message: '请填写服务要求', trigger: 'blur'}]
      }
    };
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.admin_wmtasktype_add, false),
        delBtn: this.vaildData(this.permissions.admin_wmtasktype_del, false)
      };
    }
  },
  mounted() {
    // console.log(this.$route.query.agentId,"123456")
    // console.log(this.$route.query.row.id,"123456")
  },
  created() {
    this.getMap();
  },
  methods: {
    async getMap() {
      const res = await getDictType({type: 'task_type_desc'});
      this.map = res.data.data;
    },
    getText(info) {
      let val = this.map.find(item => item.value === info);
      if (val) return val.description;
    },
    getList(page, params) {
      // debugger
      // this.$route.query.searchForm;
      if (this.$route.query.agentId == this.$route.query.durgentId) {
        this.searchForm.ruleId = this.$route.query.durgentId;
        // this.searchForm.level1Id="";
      } else if (this.$route.query.agentId != null && this.$route.query.agentId != '' && this.$route.query.durgentId == null && this.$route.query.durgentId == '') {
        this.searchForm.level1Id = this.$route.query.agentId;
      } else if (this.$route.query.agentId != null && this.$route.query.agentId != '' && this.$route.query.durgentId != null && this.$route.query.durgentId != '') {
        this.searchForm.durgentId = this.$route.query.durgentId;
        this.searchForm.level1Id = this.$route.query.agentId;
      }
      // this.searchForm.durgentId=this.$route.query.durgentId;
      // this.searchForm.level1Id=this.$route.query.agentId;
      this.tableLoading = true;
      fetchLists(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      )
        .then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    rowDel: function(row, index) {
      this.$confirm('是否确认删除ID为' + row.id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          return delObj(row.id);
        })
        .then(data => {
          this.$message.success('删除成功');
          this.getList(this.page);
        });
    },
    handleUpdate: function(row, index, done, loading) {
      if (Number(row.taskScoreStart) > Number(row.score)) {
        this.$message.error('默认积分不能小于 积分范围开始积分');
        loading();
        return false;
      }

      if (Number(row.taskScoreEnd) < Number(row.score)) {
        this.$message.error('默认积分不能大于 积分范围结束积分');
        loading();
        return false;
      }

      if (Number(row.taskScoreEnd) < Number(row.taskScoreStart)) {
        this.$message.error('积分范围结束积分 不能 大于 积分范围结束');
        loading();
        return false;
      }
      putObj(row)
        .then(data => {
          this.$message.success('修改成功');
          done();
          this.getList(this.page);
        })
        .catch(() => {
          loading();
        });
    },
    updateTy: function(row, index, done, loading) {
      row.enableFlag = 1;
      putObj(row)
        .then(data => {
          this.$message.success('停用成功');
          this.refreshChange();
        })
        .catch(() => {});
    },
    taskTipsFn(row) {
      if (row.taskRemark) {
        this.taskTipForm.taskRemark = row.taskRemark;
      }
      this.currentRow = row;
      this.taskTipVisible = true;
    },
    taskTipHandleClose() {
      this.taskTipForm.taskRemark = '';
      this.taskTipVisible = false;
    },
    submitFn() {
      this.$refs.taskTipFormRef.validate(async valid => {
        if (valid) {
          const obj = {
            id: this.currentRow.id,
            taskRemark: this.taskTipForm.taskRemark
          };
          const res = await updateTaskRemarkApi(obj);
          if (res.data.code === 0) {
            this.$message.success('添加服务要求成功');
            this.getList(this.page);
            this.taskTipHandleClose();
          }
          console.log('res', res);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    updateQy: function(row, index, done, loading) {
      row.enableFlag = 0;
      putObj(row)
        .then(data => {
          this.$message.success('启用成功');
          this.refreshChange();
        })
        .catch(() => {});
    },
    handleSave: function(row, done, loading) {
      if (row.taskScoreStart > row.score) {
        this.$message.error('默认积分不能小于 积分范围开始积分');
        loading();
        return false;
      }

      if (row.taskScoreEnd < row.score) {
        this.$message.error('默认积分不能大于 积分范围结束积分');
        loading();
        return false;
      }

      if (row.taskScoreEnd < row.taskScoreStart) {
        this.$message.error('积分范围结束积分 不能 大于 积分范围结束');
        loading();
        return false;
      }
      addObj(row)
        .then(data => {
          this.$message.success('添加成功');
          done();
          this.getList(this.page);
        })
        .catch(() => {
          loading();
        });
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    searchChange(form, done) {
      this.searchForm = form;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    refreshChange() {
      this.getList(this.page);
    },
    backPage() {
      this.$router.push({path: '/admin/wmtasktypeentref/index'});
    }
  }
};
</script>
<style lang="scss" scoped>
.tip-cont {
  .list {
    margin: 10px 0;
    h3 {
      color: #666;
      margin-bottom: 6px;
    }
  }
  .title {
    font-weight: 600;
    color: #333;
    line-height: 25px;
    margin-bottom: 3px;
  }
  .cont {
    max-width: 500px;
  }
}
.tip-img {
  cursor: pointer;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
</style>
