<template>
  <div class="app-container">
    <van-nav-bar
      title="方案管理"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <div style="padding: 0 3% 0.2rem;">
        <van-search
          v-model="queryParams.schemeName"
          placeholder="请输入搜索关键词"
          show-action
        >
          <template #action>
            <div @click="handleQuery">搜索</div>
          </template>
        </van-search>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getList"
    >
      <van-swipe-cell v-for="(item,index) in schemeList" :key="index">
        <van-cell center :to="{name:'programmeDetail', query: {id:item.id}}">
          <template #title>
            <p>{{item.schemeName}}</p>
          </template>
          <template #icon>
            <van-icon name="../../../static/images/lawEnforcement/icon/icon_aj.png" size="30" color="#539FFD" style="margin-right: 10px;" />
          </template>
          <template #label>
            <p>{{item.checkList}}</p>
          </template>
          <template #default>
            <p style="color: #1DCC80;">{{item.applyStatus}}</p>
            <p style="color: #1D6FE9;">{{ item.taskName }}</p>
          </template>
        </van-cell>
        <template #right>
          <van-row>
            <van-col>
              <van-button square type="info" :to="{name:'programmeApproval', query: {id:item.instanceId}}" class="delete-button">审批<br/>历史</van-button>
            </van-col>
            <van-col>
              <van-button v-if=" item.applyStatus == '申请中' && ( item.taskName == '已撤销' || item.taskName == '未启动' ) " square type="info" color="#1DCC80" @click="handleApply(item.id)" class="delete-button">提交<br/>申请</van-button>
            </van-col>
            <van-col>
              <van-button v-if="user == '1'" square text="撤销" @click="handleCancel(item)" type="info" color="#FF8900" class="delete-button" />
            </van-col>
            <van-col>
              <van-button v-if=" item.applyStatus == '申请中' && ( item.taskName == '已撤销' || item.taskName == '未启动' ) " square text="修改" type="info" :to="{name:'programmeModify', query: {id:item.id}}" class="delete-button" />
            </van-col>
            <van-col>
              <van-button v-if=" item.applyStatus == '申请中' && ( item.taskName == '已撤销' || item.taskName == '未启动' ) " square text="删除" type="danger" @click="handleDelete(item)" class="delete-button" />
            </van-col>
          </van-row>
        </template>
      </van-swipe-cell>
    </van-list>
  </div>
</template>
<script>
import { listScheme , getUserProfile , delScheme } from "@/api/lawEnforcement/index";
import request from '@/utils/request'
import {Dialog} from "vant";
export default {
  name: "index",
  data() {
    return {
      value:'',
      radio:'',
      //是否显示加载
      loading: false,
      //是否滚动到底部
      finished: false,
      sheetShow: false,
      // 查询参数
      queryParams: {
        // 分页
        pageNum: 1,
        pageSize: 10,
        // 查询排序
        orderByColumn: "id",
        isAsc: "desc",
        schemeName: null,
        checkList: null,
        checkType: null,
        createBy: "use",
      },
      //方案管理表格数据
      schemeList:[],
      requestMapping: '/enforce/scheme'
    };
  },
  created() {
    this.getDicts("scheme_status").then(response => {
      this.applyStatusOptions = response.data;
    });
    getUserProfile().then(response => {
      this.user = response.data.userId;
    });
  },
  methods: {
    getList(){
      this.loading = true;
      listScheme(this.queryParams).then(response => {
        for (var i = 0 ; i < response.rows.length ; i++){
          response.rows[i].applyStatus = this.selectDictLabel(this.applyStatusOptions, response.rows[i].applyStatus);
          this.schemeList.push(response.rows[i]);
        }
        if(this.schemeList.length >= response.total){
          this.finished = true;
          return;
        }
        this.queryParams.pageNum += 1 ;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.schemeList = [];
      this.getList();
    },
    handleApply(id) {
      const requestMapping = this.requestMapping;
      Dialog.confirm({
        title: '系统提示',
        message: '是否提交ID为"' + id + '"的申请单据?',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(function() {
        return request({
          url: requestMapping + '/submitApply/' + id,
          method: 'post',
        });
      }).then(() => {
        this.$notify({ type: 'success' , message: "申请成功" });
        location.reload(true);
      })
    },
    handleCancel(row) {
      console.log(row);
      const instanceId = row.instanceId;
      Dialog.confirm({
        title: '系统提示',
        message: '是否确认撤销ID为"' + instanceId + '"的流程实例?',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(function () {
          const data = { instanceId: instanceId };
          return request({
            url: "/activiti/process/cancelApply",
            method: "post",
            params: data,
          });
        })
        .then((response) => {
          // 其他模块用到以下两行代码,请勿删除！
          this.$notify({ type: 'success' , message: "操作成功" });
          location.reload(true);
        })
        .catch(function () {});
    },
    handleDelete(row) {
      const ids = row.id || this.ids;
      Dialog.confirm({
        title: '系统提示',
        message: '是否确认删除方案信息标识为"' + row.instanceId + '"的数据项?',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(function() {
        return delScheme(ids);
      }).then(() => {
        this.$notify({ type: 'success' , message: "删除成功" });
        location.reload(true);
      }).catch(() => {});
    },

  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.van-row{
  height: 100%;
}
.van-col{
  height: 100%;
}
.delete-button {
  height: 100%;
}
.app-container {
  padding: 0.2rem 3%;
}
/deep/ .van-action-sheet__content{
  padding-bottom: 0.5rem;
}
.sheetContent{
  padding: 10PX 1% 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #eeeeee;
  .sheetTitle{
    font-size: 0.42rem;
    background-color: transparent;
    width:auto;
    color: #333333;
    border:none;
    margin-bottom: 10PX;
    padding: 0 15px;
  }
  /deep/ .van-row{
    margin-bottom: 10PX;
  }
  /deep/ .van-col{
    text-align: center;
    padding: 0 15px;
  }
  .active{
    background-color: #1D6FE9;
    color: #FFFFFF;
    border: none;
  }
  p{
    font-size: 0.42rem;
    padding: 0.2rem 0;
    color: #666666;
    border-radius: 4PX;
    border: 1px solid #B4B0B0;
  }
}
/deep/ .van-action-sheet__header{
  border-bottom: 8PX solid #eeeeee;
}
/deep/.van-swipe-cell{
  margin-bottom: 0.2rem;
  border-radius: 0.2rem;
  overflow: hidden;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
}
/deep/ .van-search__content{
  background-color: #ffffff;
}
/deep/ .van-search__action{
  background-color: #1D6FE9;
  text-align: center;
  color: #ffffff;
  padding: 0 0.5rem;
}
/deep/ .van-search{
  background-color: transparent;
  border-radius: 20PX;
  border: 1px solid #cccccc;
  padding: 0;
  overflow: hidden;
}
.van-cell__title{
  color: #666666;
  p{
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-all;
    overflow: hidden;
  }
}
/deep/ .van-nav-bar--fixed{
}
/deep/.van-cell__title{
  flex: 0.7;
}
/deep/.van-cell__title span{
  font-family: Arial;
  font-size: 0.4rem;
  font-weight: normal;
}
/deep/.van-cell__value{
  flex: 0.3;
}
/deep/ .van-nav-bar__title{
  display: flex;
  max-width: initial;
  p{
    line-height: 30Px;
    margin-left: 6Px;
    font-size: 21Px;
    color: #D60303;
    font-family: SourceHanSansCNBold;
  }
}
/deep/ .van-tabs__content{
  width: 96%;
  margin: 0 auto;
}
/deep/ van-tab__pane-wrapper{
  padding: 0 2%;
}
/deep/ .van-tab{
  border: none;
  color: #1D6FE9;
}
/deep/ .van-tab--active{
  border-radius: 30Px;
  box-shadow: 0px 5px 5px #ccc;
  background-color: #FE1313!important;
}
/deep/ .van-tabs--card>.van-tabs__wrap{
  height: 0.9rem;
  margin: 10Px 0;
}
/deep/ .van-tab__pane{
  background: #FFF;
  border-radius: 8Px;
  overflow: hidden;
}
/deep/ .van-tabs__nav--card{
  padding: 3Px 2%;
  border: none;
  border-radius: 1rem;
  height: 0.9rem;
}
.bannerTit{
  position: absolute;
  bottom: 10px;
  background: rgba(255,255,255,0.3);
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  color: #fff;
  overflow: hidden;
  padding: 0 3%;
  font-size: 16Px;
}
.link{
  color: #000;
}
.my-swipe {
  border-radius: 8Px;
}
.my-swipe .van-swipe-item .van-image{
  width: 100%;
}
.van-grid-item p{
  margin-top: 10px;
}
.newTit{
  font-size: 0.45rem;
  margin: 0.4rem 0;
  font-family: Source Han Sans SC, Source Han Sans SC-Medium;
  font-weight: 500;
  text-align: left;
  color: #333333;
}
.newContent{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
  overflow: hidden;
}
.search-icon {
  line-height: inherit;
  margin-left: 10px;
}
</style>
