<style scoped>
  @import "css/cssReset.css";

  .query-box {
    border: none;
    padding-left: 0
  }

  ._nav li {
    float: left;
    font-size: 14px;
    color: #666666;
    padding: 15px 10px;
    background-color: #F1F1F1;
    cursor: pointer;
    position: relative;
  }

  ._nav li._active {
    background-color: #FFFFFF;
    color: #333333
  }

  ._nav li._active::after {
    content: "";
    width: 20px;
    height: 3px;
    background-color: #E95252;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 38%;
  }

  ._content li {
    display: flex;
    padding: 0 30px;
    margin-top: 20px;
    border: 1px solid #ebebeb;
    background-color: white;
  }

  ._content li:hover {
    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
    transition: all linear 0.5s;
  }

  ._content li>div {
    padding: 9px 0
  }

  ._left {
    display: flex;
    flex: 2;
    align-items: center;
    border-right: 1px dashed #DCDFE6;
    padding-right: 20px !important;
  }

  ._left>div {
    padding-left: 14px
  }

  ._Icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-weight: bold;
    background-color: #2AAEF2;
    border-radius: 50%;
    font-size: 22px;
    display: block;
  }

  ._t {
    color: #333333;
    font-size: 14px;
    padding-bottom: 7px;
    font-weight: bold
  }

  ._s {
    color: #666666;
    font-size: 12px;
  }

  ._cent {
    flex: 3;
    display: flex;
    align-items: center;
  }

  ._cent>div {
    width: 50%;
    padding-left: 80px;
  }

  ._right {
    flex: 1;
    align-items: center;
    display: flex;
    padding-left: 20px !important;
    border-left: 1px dashed #DCDFE6;
  }

  .icon-liuchengsheji {
    background-color: #B552E9;
  }

  .icon-liuchengsheji:hover {
    background-color: #c57dea
  }

  .eicon-liuchengshejidit:active {
    background-color: #8741ab
  }

  ._red {
    color: #E95252
  }

  ._dt {
    text-decoration: underline
  }

  ._cu {
    cursor: pointer;
  }

  ._none {
    opacity: 0;
  }

  ._block {
    opacity: 1
  }

  .InfoChangeLog {
    height: auto;
    background-color: #FFFFFF;
  }

  .changLogList {
    padding-left: 20px;
    max-height: 180px;
    overflow: auto;
  }

  .changLogList_l {
    border-left: 1px solid #E9E9E9;
    position: relative;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-top: 10px;
  }

  ._radius_green {
    background-color: #47BF8C;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: -4px;
    top: 19px;
  }

  .changLog_time {
    color: #666666;
    font-size: 12px;
    display: inline-block;
    padding-right: 10px
  }

  .el-button {
    border-radius: inherit !important
  }

  ._log_t {
    padding: 10px;
  }

  ._bdrd {
    border-radius: 17px;
  }

  ._tp {
    padding: 10px 20px 0 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    align-items: flex-end
  }

  ._bg_blue {
    background-color: #297BEF
  }

  ._bg_org {
    background-color: #F16C3C !important
  }

  ._bg_greend {
    background-color: #32B37C
  }

  ._bg_greendS {
    background-color: #1C9A65
  }

  ._bg_gray {
    background-color: #666666
  }

  ._color_blue {
    color: #005CAA
  }

  ._yewu {
    color: white;
    padding: 3px 13px;
  }

  ._qian {
    padding: 6px 15px;
  }

  ._array {
    display: inline-block;
    background-color: #999999
  }

  ._array_h {
    width: 35px;
    height: 3px;
  }

  ._array_h_left {
    top: 14px;
    left: -40px;
    position: absolute;
  }

  ._array_h_right {
    top: 14px;
    right: -40px;
    position: absolute;
  }

  ._array_w {
    width: 3px;
    height: 35px;
  }

  .tri_left {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #999999;
  }

  .tri_down {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #999999;
  }

  .tri_right {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #999999;
  }

  ._tag {
    display: inline-block;
    border-radius: 4px;
    padding: 2px 4px;
    margin-bottom: 4px;
    font-size: 12px
  }

  ._inlineblock_cen {
    display: inline-block;
    text-align: center
  }

  ._text_right {
    text-align: right;
    padding-right: 50px
  }

  ._tp_b {
    padding: 0 20px
  }

  .height40 {
    height: 40px;
  }

  ._feiyong {
    padding: 10px;
    flex-wrap: wrap;
    display: flex;
  }

  ._feiyong>span {
    display: inline-block;
    padding: 4px 20px;
    color: white;
    font-size: 14px;
    border-radius: 4px;
    margin: 0 10px 10px 0;
  }

  ._log_t_s {
    font-size: 12px;
    color: #666666
  }

  .el-popover {
    text-align: inherit
  }

  ._dtel {
    padding-top: 10px;
  }

  ._no_liucheng {
    padding: 20px;
    text-align: center
  }

  ._liu_block {
    display: inline-block;
    width: auto;
    margin-bottom: 20px;
    position: relative;
  }

  .icon-xiaotuziCduan_,
  .icon-xiaotuziCduan_2 {
    position: absolute;
    right: -10px;
    top: -10px;
    color: #999999;
  }

  ._array_h_left .icon-xiaotuziCduan_2 {
    position: absolute;
    left: -10px;
    top: -10px;
    right: initial;
  }

  .text_l {
    text-align: left;
    margin-right: 50px
  }

  .text_r {
    text-align: right;
    margin-left: 50px
  }

  ._miaoshu {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 15px;
    border-radius: 4px;
    background-color: #297BEF;
    color: white;
    font-size: 14px;
    min-width: 120px;
    text-align: center;
    max-width: 130px;
  }

  ._last_ml0 {
    margin-right: 0
  }

  ._last_mr0 {
    margin-left: 0
  }

  ._array_h_dbox {
    position: absolute;
    top: 14px;
    right: -5px;
  }

  ._array_h_dbox_l {
    right: inherit;
    left: -40px
  }

  ._array_h_down {
    width: 35px;
    height: 3px;
    position: absolute;
    background-color: #999999
  }

  ._array_h_down_ {
    width: 3px;
    height: 20px;
    position: absolute;
    background-color: #999999
  }

  ._array_h_down_l {
    left: 35px
  }

  .icon-xiaotuziCduan_1 {
    position: absolute;
    left: 28px;
    top: 10px;
    color: #999999;
  }

  .xiaotuziCduan_1_l {
    left: inherit;
    right: -9px;
  }

  ._right i {
    width: 30px;
    height: 30px;
    display: inline-block;
    color: white !important;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    margin-right: 10px;
    cursor: pointer;
    outline: none;
  }

  ._right i.icon-rizhi1 {
    background-color: #67c23a
  }

  ._right i.icon-rizhi1:hover {
    background-color: #85ce61
  }

  ._right i.icon-rizhi1:active {
    background-color: #5daf34
  }

  ._right i.icon-liucheng1 {
    background-color: #409EFF
  }

  ._right i.icon-liucheng1:hover {
    background-color: #66b1ff
  }

  ._right i.icon-liucheng1:active {
    background-color: #3a8ee6
  }

  ._right i.icon-bofang {
    background-color: #ebb563
  }

  ._right i.icon-bofang:hover {
    background-color: #ebb563
  }

  ._right i.icon-bofang:active {
    background-color: #cf9236
  }

  ._right i.icon-zanting1 {
    background-color: #ebb563
  }

  ._right i.icon-zanting1:hover {
    background-color: #ebb563
  }

  ._right i.icon-zanting1:active {
    background-color: #cf9236
  }

  ._right i.el-icon-delete {
    background-color: #f56c6c
  }

  ._right i.el-icon-delete:hover {
    background-color: #f78989
  }

  ._right i.el-icon-delete:active {
    background-color: #dd6161
  }

  ._left ._Icon_box {
    width: 50px;
    padding: 0
  }

  .page_FProcessManagement .query-box li:last-child {
    top: 100px;
  }

</style>
<template>
  <div class="page_FProcessManagement">
    <div class='query-box'>
      <ul>
        <li><input type="button" class="normalBtn" value="新增流程" @click="gotoSub('addFinancialProcess',0,8)" />
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex();getTemplateList();" />
        </li>
      </ul>
    </div>
    <ul class="_nav clearfix">
      <li class="_active" @click="getTemplateList()">流程列表</li>
    </ul>
    <ul>
      <el-form class="_info_box clearfix" label-width="110px">
        <el-row>
          <el-col :span="4" :gutter="35">
            <el-form-item label="流程名称">
              <el-input v-model="msg.Name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item label="费用类型">
              <el-select filterable v-model='msg.CostTypeID'>
                <el-option :value="0" label="不限"></el-option>
                <el-option v-for="item in GetCostTypeList" :key="item.ID" :value="item.ID" :label="item.Name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ul>
    <ul class="_content" v-loading="loading">
      <li v-for="(item,index) in CTemplateList">
        <div class="_left">
          <div class="_Icon_box">
            <span class="_Icon">{{item.Name.substring(0,1)}}</span>
          </div>
          <div>
            <p class="_t">{{item.Name}}</p>
            <p class="_s">{{item.DescribeInfo}}</p>
          </div>
        </div>
        <div class="_cent _cent_zidingyi">
          <div>
            <p class="_t _red">
              <el-popover popper-class="detailsIT_Journal" width="420" trigger="click">
                <div class="InfoChangeLog" v-if="item.CoseTypeList">
                  <div class="changLog">
                    <p class="_log_t">适用费用</p>
                    <div class="_feiyong">
                      <span class="_bg_greend" v-for="Cose in item.CoseTypeList">{{Cose}}</span>
                    </div>
                    <p class="_log_t _log_t_s">注：以上费用类型将会被执行你设定的流程</p>
                  </div>
                </div>
                <div v-else>
                  <p class="_no_liucheng">暂无适用费用！</p>
                </div>
                <span slot="reference" class="_dt _cu" type="success"
                  icon="iconfont icon-rizhi1">{{item.CoseTypeListLength}}个费用类型</span>

              </el-popover>
            </p>
            <p class="_s">适用费用</p>
          </div>
          <div>
            <p class="_t _cu" v-if="item.FinanceFlowConnectType!=3">
              <el-popover popper-class="detailsIT_Journal" width="420" trigger="click">
                <div class="InfoChangeLog" v-if="item.SuitableObjectNameList">
                  <div class="changLog">
                    <p class="_log_t">适用公司</p>
                    <div class="_feiyong">
                      <span class="_bg_greend" v-for="Cose in item.SuitableObjectNameList">{{Cose}}</span>
                    </div>
                    <p class="_log_t _log_t_s">注：以上公司将会被执行你设定的流程</p>
                  </div>
                </div>
                <div v-else>
                  <p class="_no_liucheng">暂无适用公司！</p>
                </div>
                <span slot="reference" class="_dt _cu" type="success" icon="iconfont icon-rizhi1"
                  v-if="item.FinanceFlowConnectType!=3">{{item.SuitableObjectNameListlength}}个适用公司</span>
              </el-popover>
            </p>
            <P v-if="item.FinanceFlowConnectType==3"> <span slot="reference" class="_t" type="success"
                icon="iconfont icon-rizhi1">集团通用</span></P>
            <p class="_s">适用公司</p>
          </div>
          <div>
            <p class="_t" v-if="item.Status==1">{{item.FlowNum==null?'无':item.FlowNum}}</p>
            <p class="_t" v-else>暂未开启流程</p>
            <p class="_s">子流程数量</p>
          </div>
        </div>
        <div class="_right">
          <el-tooltip class="item" effect="dark" content="日志" placement="top">
            <el-popover popper-class="detailsIT_Journal" width="250" trigger="click">
              <div class="InfoChangeLog">
                <div class="changLog">
                  <p class="_log_t">流程日志</p>
                  <ul class="changLogList" v-if="FinanceInfoChangeLog">
                    <li class="changLogList_l" v-for="(log,li) in FinanceInfoChangeLog">
                      <span style="background-color: #47BF8C" class="_radius_green"></span>
                      <p> <span class="_color_blue">{{log.emName}}</span> <span
                          class="fr changLog_time">{{log.Time}}</span> </p>
                      <p class="_dtel">{{log.StartValue}}</p>
                    </li>
                  </ul>
                  <ul v-else>
                    <li>暂无修改日志</li>
                  </ul>
                </div>
              </div>
              <i slot="reference" v-show="item.Status==1" class="iconfont icon-rizhi1"
                @click="FinanceInfoChangeLog = item.FinanceInfoChangeLog"></i>
            </el-popover>
          </el-tooltip>
          <el-tooltip popper-class="item _process" effect="dark" content="流程" placement="top">
            <el-popover popper-class="detailsIT_Journal" width="600" trigger="click">
              <div class="InfoChangeLog">
                <div class="changLog">
                  <p class="_log_t">收款流程</p>
                  <my-FlowChartModule :data="item.Workflow_Condition"></my-FlowChartModule>
                </div>
              </div>
              <i slot="reference" v-show="item.Status==1" class="iconfont icon-liucheng1"></i>
            </el-popover>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="启用" placement="top">
            <i class="iconfont icon-bofang" v-show="item.Status==2"
              @click="UpdateStatus(item.Id,item.TemplateType)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="停用" placement="top">
            <i class="iconfont icon-zanting1" v-show="item.Status==1"
              @click="UpdateStatus(item.Id,item.TemplateType)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="修改" placement="top">
            <i class="iconfont icon-liuchengsheji" v-show="item.Status==1"
              @click="goUrl('addFinancialProcess',item.Id,8)"></i>
          </el-tooltip>
        </div>
      </li>
    </ul>
    <div class="noData" v-if="noData">
      {{$t('system.content_noData')}}
    </div>
    <div>
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import myFlowChartModule from "../financial/components/FlowChartModule.vue";
  export default {
    data() {
      return {
        sendData: {},
        //TemplateList:[],
        CTemplateList: [],
        FinanceInfoChangeLog: [],
        GetCostTypeList: [],
        total: 0,
        currentPage: 1,
        noData: true,
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 6,
          RB_BranchId: -1,
          Name: '',
          CostTypeID: 0
        }
      }
    },
    created() {
      let type = this.$route.query.type;
      if (this.$route.query.Branch_Id >= 0) {
        this.msg.RB_BranchId = this.$route.query.Branch_Id;
      };
    },
    components: {
      "my-FlowChartModule": myFlowChartModule
    },
    methods: {
      handleCurrentChange(val) { //翻页功能按钮
        this.msg.pageIndex = val;
        this.getTemplateList();
      },
      tips(msg, type) {
        this.$message({
          message: msg,
          duration: 2000,
          type: type
        });
      },
      addTemplate(obj) {
        obj.RB_BranchId = this.msg.RB_BranchId;
        this.apipost('FinancialFlowTemplate_post_Set', obj, res => {
          if (res.data.resultCode == 1) {
            this.$message.success('启用成功！')
            this.getTemplateList()
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      deletTemplate(id, text) { //删除
        this.$confirm('确定删除' + '“' + text + '”' + '流程吗？删除后不可恢复！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost('FinancialFlowTemplate_post_Remove', {
            ID: id
          }, res => {
            if (res.data.resultCode == 1) {
              this.$message.success(res.data.message)
              this.getTemplateList()
            } else {
              this.$message.error(res.data.message)
            }
          }, err => {})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      financeinfo_post_GetCostTypeList() { // 费用类型
        this.apipost('financeinfo_post_GetCostTypeList', {
          Name: '',
          type: 0,
          DepartIDs: this.DepartIDs
        }, res => {
          if (res.data.resultCode == 1) {
            this.GetCostTypeList = res.data.data;
          } else {

          }
        }, err => {})
      },
      UpdateStatus(id, type) { //启停用
        this.apipost('FinancialFlowTemplate_post_UpdateStatus', {
          ID: id,
          TemplateType: type,
          RB_Branch_id: this.msg.RB_BranchId
        }, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message)
            this.getTemplateList()
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      getTemplateList() {
        this.loading = true;
        let url = 'FinancialFlowTemplate_post_GetPageList'
        // if(this.active==0){
        //     url = 'FinancialFlowTemplate_post_GetTemplateList'
        // }
        this.apipost(url, this.msg, res => {
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            let data = res.data.data.pageData;
            data.forEach(x => {
              if (x.CoseTypeList == null) {
                x.CoseTypeListLength = 0
              } else {
                x.CoseTypeListLength = x.CoseTypeList.length;
              }
              if (x.SuitableObjectNameList == null) {
                x.SuitableObjectNameListlength = 0
              } else {
                x.SuitableObjectNameListlength = x.SuitableObjectNameList.length
              }
              if (x.Workflow_Condition.AuditList != null) {
                // v-if="lc.AuditWay!=1">({{lc.AuditWay=="2"?'会签':'或签'}})
                x.Workflow_Condition.AuditList.forEach(y => {
                  if (y.AuditWay == 1) {
                    y.contentTips = y.AuditDescription
                  } else {
                    y.contentTips = y.AuditWay == 2 ? y.AuditDescription + '（会签）' : y.AuditDescription +
                      '（或签）'
                  }
                })
              }
              x.FinanceInfoChangeLog.forEach(y => {
                y.Time = this.$commonUtils.formatMsgTime(y.UpdateDate)
              })
            });
            this.CTemplateList = data;
            this.loading = false;
            if (data.length > 0) {
              this.noData = false;
            } else {
              this.noData = true;
            }
          } else {
            this.$message.error(res.data.message);
            this.loading = false;
          }
        }, err => {})
      },
      resetPageIndex() {
        this.msg.pageIndex = 1
        this.currentPage = 1
      },
      gotoSub(path, id, isZ, Branch_Id) {
        var tempStr = '/financial/' + path + '?id=' + id + '&isZ=' + isZ;
        this.$router.push({
          path: tempStr
        });
      },
      goUrl(path,id,isZ,Branch_Id) {
          this.$router.push({ 
            path: path,
            query:{"id":id,"isZ":isZ,"blank":'y',tab:"修改流程"} 
        })
      },
    },
    mounted() {
      this.getTemplateList();
      this.financeinfo_post_GetCostTypeList();
    }
  }

</script>
