<template>
  <div class="search" style="height: 100%;">
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="handleSearch">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-item label="任务名称" prop="name">
                <a-input
                  type="text"
                  v-model="searchForm.name"
                  placeholder="请输入"
                  clearable
                />
              </a-form-item>
            </a-col>
<!--            <a-col :md="6" :sm="8">-->
<!--              <a-form-item label="所属流程" prop="processName">-->
<!--                <a-input-->
<!--                  type="text"-->
<!--                  v-model="searchForm.processName"-->
<!--                  placeholder="请输入"-->
<!--                  clearable-->
<!--                />-->
<!--              </a-form-item>-->
<!--            </a-col>-->
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="12" >
                <a-button @click="handleSearch" type="primary" icon="search">搜索</a-button>
                <a-button @click="handleReset" style="margin-left: 10px;">重置</a-button>
              <a-dropdown v-if="selectedRowKeys.length > 0" v-has="'doneManage:deleteAll'">
                <a-button style="margin-left: 8px" @click="batchDell"> <a-icon type="delete"/> 删除 </a-button>
             </a-dropdown>
            </a-col>
          </span>
          </a-row>
        </a-form>
      </div>

      <a-row>
        <a-table
          :scroll="{x:1200,y:innerHeight/1.5}" bordered
          :loading="loading"
          rowKey="id"
          :dataSource="data"
          :pagination="ipagination"
          @change="handleTableChange"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          ref="table"
        >
          <a-table-column title="序号"  :width="70" align="center">
            <template slot-scope="t,r,i" >
              <span> {{i+1}} </span>
            </template>
          </a-table-column>
          <a-table-column title="任务名称" dataIndex="name"   align="center"  :width="230">
            <template slot-scope="t,r,i">
              <span> {{t}} </span>
            </template>
          </a-table-column>
          <a-table-column title="所属流程" dataIndex="processName"   align="center" :width="220">
            <template slot-scope="t,r,i">
              <span> {{t}} </span>
            </template>
          </a-table-column>
          <a-table-column title="委托人" dataIndex="owner"   align="center" :width="100">
            <template slot-scope="t,r,i">
              <span> {{t}} </span>
            </template>
          </a-table-column>
          <a-table-column title="流程发起人" dataIndex="applyer"   align="center" :width="120">
            <template slot-scope="t,r,i">
              <span> {{t}} </span>
            </template>
          </a-table-column>
          <a-table-column title="优先级" dataIndex="priority"   align="center" :width="100"
                          key="priority" :sorter="(a,b)=>a.priority - b.priority"
          >
            <template slot-scope="t">
              <span v-if="t==0" style="color: green;"> 普通 </span>
              <span v-else-if="t==1" style="color: orange;"> 重要 </span>
              <span v-else-if="t==2" style="color: red;"> 紧急 </span>
              <span v-else style="color: #999;"> 无 </span>
            </template>
          </a-table-column>
          <a-table-column title="审批操作" dataIndex="deleteReason"   align="center">
            <template slot-scope="t">
              <span> {{t}} </span>
            </template>
          </a-table-column>
          <a-table-column title="审批意见" dataIndex="comment"   align="center">
            <template slot-scope="t">
              <!--<j-ellipsis :value="t" :length="10"/>-->
              <span>{{removeHtmlStyle(t)}}</span>
            </template>
          </a-table-column>
          <a-table-column title="耗时" dataIndex="duration"   align="center" :width="100"
                          key="duration" :sorter="(a,b)=>a.duration - b.duration"
                          >
            <template slot-scope="t">
              <span> {{millsToTime(t)}} </span>
            </template>
          </a-table-column>
          <a-table-column title="创建时间" dataIndex="createTime"   align="center"  :width="170">
            <template slot-scope="t">
              <span> {{t}} </span>
            </template>
          </a-table-column>
          <a-table-column title="操作" dataIndex="action"   align="center">
            <template slot-scope="t,r,i">
              <a href="javascript:void(0);" @click="detail(r)" v-has="'doneManage:from'">流程数据</a>
              <!--<a-divider type="vertical" />
              <a href="javascript:void(0);" @click="history(r)" >审批历史</a>-->
              <a-divider type="vertical"  v-has="'doneManage:delete'"/>
              <a-popconfirm title="确定删除吗?" @confirm="() => remove(r)">
                <a style="color: red;" v-has="'doneManage:delete'">删除</a>
              </a-popconfirm>
            </template>
          </a-table-column>
        </a-table>
      </a-row>
    </a-card>
    <!---->
    <a-modal title="审批历史" v-model="modalLsVisible" :mask-closable="false" :width="'80%'" :footer="null">
     <div v-if="modalLsVisible">
        <component :is="historicDetail" :procInstId="procInstId"></component>
      </div>
    </a-modal>
    <!--流程表单-->
    <a-modal :title="lcModa.title" v-model="lcModa.visible" :footer="null" :maskClosable="false" width="80%" >
      <component :disabled="lcModa.disabled" v-if="lcModa.visible" :is="lcModa.formComponent"
                 :processData="lcModa.processData" :isNew = "lcModa.isNew" :procInstId="lcModa.procInstId" :pictureId="lcModa.pictureId"
                 :itemId="lcModa.itemId"
                 @close="lcModa.visible=false,lcModa.disabled = false"></component>
    </a-modal>
  </div>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
  import { postFormAction } from '@api/manage'
export default {
  name: "doneManage",
  mixins:[activitiMixin,JeecgListMixin],
  data() {
    return {
      openSearch: true,
      conheight: 580,
      openTip: true,
      loading: true, // 表单加载状态
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      searchForm: {
        // 搜索框对应data对象
        name: "",
        processName: "",
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc" // 默认排序方式
      },
      modalType: 0, // 添加或编辑标识
      modalVisible: false, // 添加或编辑显示
      modalTitle: "", // 添加或编辑标题
      form: {
        // 添加或编辑表单对象初始化数据
        reason: ""
      },
      formValidate: {
        // 表单验证规则
      },
      submitLoading: false, // 添加或编辑提交状态
      data: [], // 表数据
      total: 0, // 表数据总数
      deleteId: "",
      url:{
        doneList:'/actTask/doneList',
        deleteHistoricTask:'/actTask/deleteHistoric/'
      },
      modalLsVisible: false,
      procInstId: '',
      lcModa: {
        title:'',
        disabled:false,
        visible:false,
        itemId:'',
        formComponent : null,
        isNew : false
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    batchDell(){
      if(!this.url.deleteHistoricTask){
        this.$message.error("请设置url.deleteHistoricTask属性!!!!")
        return
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！');
        return;
      } else {
        var ids = "";
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ",";
        }
        var that = this;
        this.$confirm({
          title: "确认删除",
          content: "是否删除选中数据?",
          onOk: function () {
            that.loading = true;
            postFormAction(that.url.deleteHistoricTask+ids,null).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.getDataList();
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.loading = false;
            });
          }
        });
      }
    },
    loadData(){},
    init() {
      this.getDataList();
    },
    getDataList() {
      this.loading = true;
      this.getAction(this.url.doneList,this.searchForm).then(res => {
        this.loading = false;
        if (res.success) {
          this.data = res.result||[];
        }else {
          this.$message.error(res.message)
        }
      });
    },
    removeHtmlStyle(str) {
      if (!str){
        return;
      }
      str = str.replace(/<\/?[^>]*>/g, '');       //匹配所有html标签

      str = str.replace(/<p[^>]*>/g, '<p class="tag-class">'); //去除标签内所有属性，并设置自定义类名

      str = str.replace(/(\n)/g, '')             //去除换行

      str = str.replace(/\s+style="[^"]*"/g, '') //去除style样式

      str = str.replace(/&nbsp;/gi, '')          //去除空格

      str = str.replace(/\<img/gi, '<img class="img_class"');  //添加自定义
      return str;
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.searchForm={};
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.getDataList();
    },
    handelCancel() {
      this.modalVisible = false;
    },
    detail(r) {
      if (!r.routeName) {
        this.$message.warning(
          "该流程信息未配置表单，请联系开发人员！"
        );
        return;
      }
      this.lcModa.disabled = true
      this.lcModa.itemId=r.tableId
      this.lcModa.title = '查看流程业务信息：' + r.processName
      this.lcModa.formComponent = this.getFormComponent(r.routeName).component
      this.lcModa.processData = r
      this.lcModa.isNew = false
      this.lcModa.isTask = true
      this.lcModa.procInstId=r.procInstId;
      this.lcModa.visible = true
    },
    history(r) {
      if (!r.procInstId) {
        this.$message.error("流程实例ID不存在");
        return;
      }
      this.procInstId = r.procInstId;
      this.modalLsVisible = true;
    },
    remove(v) {
      this.postFormAction(this.url.deleteHistoricTask+v.id).then(res => {
        if (res.success) {
          this.$message.success("操作成功");
          this.getDataList();
        }else {
          this.$message.error(res.message);
        }
      });
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      // this.loadData();
    },
  },
  watch: {
  }
};
</script>

<style scoped>
@import '~@assets/less/common.less';

/deep/.ant-modal {
  overflow-y: hidden;
}
/deep/.ant-modal-content{
  height: 100%;
  overflow-y: scroll;
}
/deep/.ant-modal-body{
  height: 100%;
  /*overflow-y: scroll;*/
}
/deep/.ant-modal{
  top:45px
}
</style>