<template>
  <div class="eibs-tab">
    <!-- <c-infsearch-group @handleSearch="handleSearch" @handleReset="handleReset"> -->
    <!-- 持续展示区 -->
    <!-- <template slot="keepShow"> -->
    <el-form
      class="m-table-search-form"
      ref="paramsForm"
      label-position="right"
      label-width="110px"
      size="small"
    >
      <c-row>
        <c-col :span="24">
          <c-col :span="8">
            <el-form-item
              label="审单规则"
              prop="ruleInfo"
              style="width: 100%"
            >
              <c-input
                v-model="model.ruleInfo"
                maxlength="50"
                placeholder="请输入审单规则"
              ></c-input>
            </el-form-item>
          </c-col>
          <c-col :span="8">
            <el-form-item
              label="创建时间"
              prop="opndatfrom"
              style="width: 100%"
            >
              <c-col :span="11">
                <c-date-picker
                  type="date"
                 v-model="model.opndatfrom"
                  style="width: 100%"
                  placeholder="请选择"
                ></c-date-picker>
              </c-col>
              <c-col :span="2" style="text-align: center">
                <label style="display: inline-block; width: 100%">-</label>
              </c-col>
              <c-col :span="11">
                <c-date-picker
                  type="date"
                  v-model="model.opndatto"
                  style="width: 100%"
                  placeholder="请选择"
                ></c-date-picker>
              </c-col>
            </el-form-item>
          </c-col>
          <c-col :span="8">
            <el-form-item label="创建人" prop="ruleCreater" style="width: 100%">
              <c-input
                v-model="model.ruleCreater"
                maxlength="40"
                placeholder="请输入Name"
              ></c-input>
            </el-form-item>
          </c-col>
        </c-col>
      </c-row>
      <!-- </template> -->
      <c-col
        :span="24"
        style="text-align: right; height: 36.8px"

      >
        <el-button size="small" @click="handleReset">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleSearch"
          >查询</el-button
        >
      </c-col>
    </el-form>
    <c-col :span="24">
      <div style="border-bottom: 10px solid rgb(232, 232, 232)"></div>
    </c-col>


    <c-col style="margin-top: 10px">
      <c-button class="medium_bcs" size="medium" type="primary" style="margin-left: 0 ; float :right" @click="ruleAdd()"
         >+添加</c-button
      >
    </c-col>

    <c-col :span="24">
      <c-istream-table :list="stmData.data" :columns="stmData.columns">
        <el-table-column fixed="right" prop="op" label="操作" width="200px">

          <template slot-scope="scope">
            <c-button
              style="margin-left: 0"
              size="small"
              type="primary"
              @click="ruleDetail(scope)"
            >
              详情
            </c-button>

            <c-button
              style="margin-left: 0"
              size="small"
              type="primary"
              @click="ruleEdit(scope)"
            >
              编辑
            </c-button>
            <c-button
              style="margin-left: 0"
              size="small"
              type="primary"
              @click="ruleDel(scope.$index)"
            >
              删除
            </c-button>
          </template>
        </el-table-column>
      </c-istream-table>
    </c-col>
    <el-dialog :visible.sync="showPanel" :title="opttitle" append-to-body :before-close="cancel">
      <el-form
          class="m-table-search-form"
          ref="paramsForm"
          label-position="right"
          label-width="110px"
          size="small"
        >
        
          <c-row>
            <c-col :span="24">
              <c-col :span="24">
                <c-input v-if="showIndex" style="visibility: hidden" v-model="model.edit.index" ></c-input>
                <el-form-item
                  label="创建时间"
                  prop="edit.opndat"
                  style="width: 100%"
                >
                  <c-col :span="24">
                    <c-date-picker
                      type="date"
                    v-model="model.edit.opndat"
                      style="width: 95%"
                      placeholder="请选择"
                      disabled
                    ></c-date-picker>
                  </c-col>
                  
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item
                  label="单据要求内容文本"
                  prop="edit.ruleDesc"
                  style="width: 100%"
                  
                >
                  <c-input
                    v-model="model.edit.ruleDesc"
                    placeholder="请输入RuleDesc"
                    type="textarea"
                    :rows="4"
                    maxlength="200"
                    show-word-limit
                    :disabled="isDetail"
                    style="width: 95%"
                  ></c-input>
                </el-form-item>
              </c-col>

              <c-col :span="24">
                <el-form-item
                  label="规则判定条件"
                  prop="edit.ruleInfo"
                  style="width: 100%"
                  
                >
                <c-col :span="11">
                  <el-form-item
                    label="业务模型"
                    prop="edit.mod"
                    style="width: 100%"
                    
                  >
                    <c-select
                      v-model="model.edit.mod"
                      style="width: 100%"
                      placeholder="请选择业务模型"
                      @change="changeMod()"
                      :disabled="isDetail"
                    >
                      <el-option
                        v-for="item in select01"
                        :key="item.id"
                        :label="item.value"
                        :value="item.value"
                        
                      ></el-option>          
                    </c-select>
                  </el-form-item>
                </c-col>
                <c-col :span="12">
                  <el-form-item
                    label="单据模型"
                    prop="edit.field"
                    style="width: 98%"
                    
                  >
                    <c-select
                      v-model="model.edit.field"
                      style="width: 100%"
                      placeholder="请选择收支类型"
                      @change="chooseField()"
                      :disabled="isDetail"
                    >
                      <el-option
                        v-for="item in select02"
                        :key="item.id"
                        :label="item.value"
                        :value="item.value"
                        
                      ></el-option>          
                    </c-select>
                  </el-form-item>
                </c-col>
                </el-form-item>
              </c-col>
              
              <c-col :span="24">
                <el-form-item
                  label=" "
                  prop="edit.ruleInfo"
                  style="width: 100%"
                  
                >
                  <c-input
                    v-model="model.edit.ruleInfo"
                    placeholder="请输入RuleDesc"
                    type="textarea"
                    :rows="4"
                    maxlength="200"
                    show-word-limit
                    :disabled="isDetail"
                    style="width: 95%"
                  ></c-input>
                </el-form-item>
              </c-col>
            </c-col>
          </c-row>

          <c-col
            :span="24"
            style="text-align: center; height: 36.8px"
          >
            <el-button
              type="primary"
              size="small"
              @click="submitData"
              v-if="optType"
              >提交</el-button
            >
            <el-button style="margin-left: 0" size="small" @click="cancel">
              返回
            </el-button> 
          </c-col>
        </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Infcpd/Event";
export default {
  inject: ["root"],
  props: ["model"],
  mixins: [commonProcess],
  components: {},
  data() {
    return {
      showPanel: false,
      opttitle:"",
      optType:true,
      dialogTableVisible: false,
      isDetail:true,
      showIndex:false,
      nowDate:'',

      select01: [
        {
          "id": 1,
          "value": "doc",
          "obj":[{
            "id":101,
            "value":".crtdate"
            },
            {
            "id":102,
            "value":".inv.opndate"
            },
            {
            "id":103,
            "value":".inv.original"
            },
          ]
        },
        {
           "id": 2,
          "value": "didgrp",
          "obj":[{
              "id":201,
              "value":".rec.shpdat"
            },
            {
              "id":202,
              "value":".rec.expdat"
            },
            {
              "id":203,
              "value":".rec.bdflg"
            },
            {
              "id":204,
              "value":".rec.nomtop"
            },
            {
              "id":205,
              "value":".rec.nomton"
            },
            {
              "id":206,
              "value":".rec.opndat"
            },
          ]
        },
        {
           "id": 3,
          "value": "dedgrp",
          "obj":[{
              "id":301,
              "value":".rec.shpdat"
            },
            {
              "id":302,
              "value":".rec.expdat"
            },
            {
              "id":303,
              "value":".rec.bdflg"
            },
            {
              "id":304,
              "value":".rec.nomtop"
            },
            {
              "id":305,
              "value":".rec.nomton"
            },
            {
              "id":306,
              "value":".rec.opndat"
            },
          ]
        }
      ],//获取的一级数组数据
      select02: [],//获取的二级数组数据
      indexNum:0,//定义一级菜单的下标
      trnData: {
        columns: [
          '1 1 "附加条款内容文本" 300',
          '2 2 "智能审单规则" 500',
        ],
        data: [],
      },
      stmData: {
        columns: [
            '1 1 "附加条款内容文本" 400',
            '2 2 "智能审单规则" 800'
        ],
        data: [
         

        ],
      },
    };
  },
  methods: {
    ...Event,

    ruleDetail(scope){
      
      this.model.edit.opndat = scope.row['srcStr'].split('\t')[3];
      this.model.edit.ruleInfo = scope.row['srcStr'].split('\t')[2];
      this.model.edit.ruleDesc = scope.row['srcStr'].split('\t')[1];
      this.model.edit.index = scope.row['srcStr'].split('\t')[0];
      this.isDetail = true;
      this.opttitle = "审单规则详情";
      this.optType = false;
      this.showPanel = true;
    },
    
    ruleEdit(scope){
      this.model.edit.opndat = scope.row['srcStr'].split('\t')[3];
      this.model.edit.ruleInfo = scope.row['srcStr'].split('\t')[2];
      this.model.edit.ruleDesc = scope.row['srcStr'].split('\t')[1];
      this.isDetail = false;
      this.opttitle = "审单规则修改";
      this.optType = true;
      this.showPanel = true;
    },
    ruleAdd(){
      this.model.edit.opndat = this.nowDate;
      this.isDetail = false;
      this.opttitle = "审单规则新增";
      this.optType = true;
      this.showPanel = true;
    },
    ruleDel(idx){
      this.stmData.data.splice(idx,1);
    },
    changeMod(){
      let i = 0;
      for (i = 0;i<this.select01.length;i++) {
        if (this.select01[i].value == this.model.edit.mod){
          this.indexNum = i;
          break
        }
      }
      this.select02 = this.select01[this.indexNum].obj;
    },
    chooseField(){
      this.model.edit.ruleInfo = this.model.edit.ruleInfo +'{' + this.model.edit.mod + this.model.edit.field +'}';
    },
    submitData(){
      const length = this.stmData.data.length;
      let btnStr = this.stmData.data;
      let str ;
      if(this.model.edit.index == ""){  //新增
        let max = 0;
        for(let i=0;  i < length; i++){
          //获取数组中每行的数据
          let arr = btnStr[i].split("\t");                   
          if(arr[0] > max) {
            max = arr[0];
          }   
        }
        max++;

        str = max +'\t' + this.model.edit.ruleDesc + '\t' + this.model.edit.ruleInfo + '\t' + this.model.edit.opndat + '\t' +  'mbf'; 
        this.stmData.data.splice(length,0,str);
      }else{  //修改
        let num = 0;
        for(let i=0;  i < length; i++){
          //获取数组中每行的数据
          let arr = btnStr[i].split("\t");                   
          if(arr[0] == this.model.edit.index ) {
            str = arr[0]+'\t' + this.model.edit.ruleDesc + '\t' + this.model.edit.ruleInfo + '\t' + arr[3] + '\t' +  arr[4]; 
            num = i;
            break;
          }   
        }
        this.stmData.data.splice(num,1,str);
      }
      this.$store.commit('setCheckRuleData', this.stmData.data)
      this.model.edit.opndat = '';
      this.model.edit.ruleInfo = '';
      this.model.edit.ruleDesc = '';
      this.model.edit.ruleInfo = '';
      this.model.edit.mod = '';
      this.model.edit.field = '';
      this.model.edit.index='';
      this.showPanel = false;
    },
    cancel(){
      this.model.edit.opndat = '';
      this.model.edit.ruleInfo = '';
      this.model.edit.ruleDesc = '';
      this.model.edit.mod = '';
      this.model.edit.field = '';
      this.model.edit.index='';
      this.showPanel = false;
    },
    handleReset() {},
  },
  created: function () {
    this.stmData.data = this.$store.state.Status.checkRuleData;
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    this.nowDate = year + '-' + month + '-' + day;
    this.model.opndatfrom = this.nowDate;
    this.model.opndatto = this.nowDate;
  },
};
</script>
<style>
.el-dialog__body {
  padding: 10px 5px 50px;
}
</style>