<template>
  <!-- 过程节点配置 -->
  <div class="ProcessNodeConfig">
    <div>
      <div class="splitItem">节点配置</div>
      <div class="nodeSetbox">
        <Form>
          <FormItem label="节点名称：" :label-width="100">
            <Input v-model="configData.name" placeholder="请输入" :disabled="readOnly"/>
          </FormItem>
          <FormItem  :label-width="100" >
            <label slot="label"><i class="requireStyle">*</i>选择操作人：</label>
            <Select v-model="configData.approverStyle" :disabled="readOnly" @on-change="approverStyleChange">
              <Option  :value="0" :key="0">直接选择</Option>
              <Option  :value="1" :key="1">扩展程序</Option>
            </Select>
          </FormItem>
          <FormItem  :label-width="100" v-if="configData.approverStyle === 0">
            <label slot="label"><i class="requireStyle">*</i>操作人：</label>
            <complexPop :title="'选择操作人'" :resultData="resultData" :disabled="readOnly" @getTotalResult="getResult"></complexPop>
          </FormItem>
          <FormItem  :label-width="100" v-if="configData.approverStyle === 1">
            <label slot="label"><i class="requireStyle">*</i>扩展程序：</label>
            <Input v-model="configData.actionConfig[0].handleValue" placeholder="请输入" :disabled="readOnly" />
          </FormItem>
          <FormItem>
              <Row>
                  <Col span="12" style="display:flex">
                    <span>
                      <i class="requireStyle">*</i>
                      <Icon
                        v-if="pageBtnData[0].color"
                        :type="pageBtnData[0].icontype===1?'ios-checkmark-circle':'ios-close-circle'"
                        :color="pageBtnData[0].color"
                      />
                      {{pageBtnData[0].label}}：
                    </span>
                    <Input v-model="pageBtnData[0].value"  :regx="/^[0-9]*$/" @on-blur="onBlur(...arguments,0)" style="flex:1" :disabled="readOnly" />
                  </Col>
                  <!-- <Col span="12" offset="2" style="display:flex" v-show="false">
                    <span>
                      <Icon
                        v-if="pageBtnData[1].color"
                        :type="pageBtnData[1].icontype===1?'ios-checkmark-circle':'ios-close-circle'"
                        :color="pageBtnData[1].color"
                      />
                      {{pageBtnData[1].label}}：
                    </span>
                    <Input v-model="pageBtnData[1].value"  style="flex:1" />
                  </Col> -->
              </Row>
          </FormItem>
          <FormItem>
              <Row>
                  <Col span="12" style="display:flex">
                    <span>
                      <i class="requireStyle">*</i>
                      <Icon
                        v-if="pageBtnData[2].color"
                        :type="pageBtnData[2].icontype===1?'ios-checkmark-circle':'ios-close-circle'"
                        :color="pageBtnData[2].color"
                      />
                      {{pageBtnData[2].label}}：
                    </span>
                    <Input v-model="pageBtnData[2].value"  :regx="/^[0-9]*$/" @on-blur="onBlur(...arguments,2)" style="flex:1" :disabled="readOnly" />
                  </Col>
                  <!-- <Col span="12" offset="2" style="display:flex"  v-show="false">
                    <span>
                      <Icon
                        v-if="pageBtnData[3].color"
                        :type="pageBtnData[3].icontype===1?'ios-checkmark-circle':'ios-close-circle'"
                        :color="pageBtnData[3].color"
                      />
                      {{pageBtnData[3].label}}：
                    </span>
                    <Input v-model="pageBtnData[3].value"  style="flex:1" />
                  </Col> -->
              </Row>
          </FormItem>
          <FormItem label="直接结束流程:"  :label-width="100" >
            <i-switch class="switchPage" v-model="configData.manualConfig" :true-value="'1'" :false-value="'0'" :disabled="readOnly" />
          </FormItem>
          <FormItem label="驳回流程：" :label-width="100">
            <Select v-model="configData.backId" :disabled="readOnly">
                <Option v-for="item in rejectedNodes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </Form>
      </div>
      <div class="splitItem">审批人可修改字段配置</div>
      <div class="nodeSetbox">
        <Form>
          <FormItem label="可修改字段：" :label-width="90">
            <DropDownSelectFilter
              :disabled="readOnly"
              :single="false"
              :totalRowCount="modifyField.totalRowCount"
              :pageSize="modifyField.pageSize"
              @on-page-change="changePage"
              :dataEmptyMessage="modifyField.dataEmptyMessage"
              @on-input-value-change="inputChange"
              @on-fkrp-selected="OnFkrpSelected"
              @on-popper-show="onPopperShow"
              @on-clear="onClear"
              :data="modifyField.data"
              :hidecolumns="modifyField.columns"
              :AutoData="modifyField.AutoData"
              :default-selected="modifyField.defaultSelected"
              :columnsKey="modifyField.columnsKey"
            ></DropDownSelectFilter>
          </FormItem>
        </Form>
      </div>
      <div class="splitItem">超时设置</div>
      <div class="nodeSetbox">
        <div class="boxItem">
          <Form>
            <FormItem label="超时提醒:" :label-width="100">
              <i-switch v-model="status1" @on-change="change1" :disabled="readOnly" />
            </FormItem>
            <FormItem label="超时阀值:" :label-width="100" :required="status1" v-if="status1">
              <Input v-model="setOvertime.threshold" :regx="/^[1-9]\d*$/" :disabled="readOnly">
                <Select v-model="setOvertime.sources" slot="append" style="width:70px" :disabled="readOnly">
                  <Option :value="0">小时</Option>
                  <Option :value="1">天</Option>
                </Select>
              </Input>
            </FormItem>
            <FormItem label="邮箱接口:" :label-width="100" :required="status1" v-if="status1">
              <Input v-model="setOvertime.handleValue" :disabled="readOnly" />
              <!-- <Select v-model="setOvertime.handle_type" slot="prepend" style="width: 90px;dispaly:none">
                  <Option :value="11">邮箱</Option>
                  <Option :value="12">钉钉消息</Option>
              </Select>-->
              <!-- <span class="tipMessage">超过这个时间段系统将自动发送提醒消息</span> -->
            </FormItem>
          </Form>
        </div>
        <div class="boxItem">
          <Form>
            <FormItem label="自动处理:" :label-width="100">
              <i-switch v-model="status2" @on-change="change2" :disabled="readOnly" />
            </FormItem>
            <FormItem label="自动处理阀值:" :label-width="100" :required="status2" v-if="status2">
              <Input v-model="autoDetail.threshold" :regx="/^[1-9]\d*$/" :disabled="readOnly">
                <Select v-model="autoDetail.sources" slot="append" style="width: 70px" :disabled="readOnly">
                  <Option :value="0">小时</Option>
                  <Option :value="1">天</Option>
                </Select>
              </Input>
            </FormItem>
            <FormItem label="自动处理方式:" :label-width="100" :required="status2" v-if="status2">
              <Select v-model="autoDetail.handleType" :disabled="readOnly">
                <Option :value="20">同意</Option>
                <Option :value="21">驳回</Option>
              </Select>
            </FormItem>
          </Form>
        </div>
      </div>
    </div>
    <p>
      <Button type="fcdefault" @click="closeDrawer">取消</Button>
      <Button type="primary" @click="saveConfig" v-if="!readOnly">确定</Button>
    </p>
  </div>
</template>
<script>
import complexPop from "@/components/complexPop";
export default {
  name: "ProcessNodeConfig",
  components: { complexPop },
  props: {
    configData: {
      type: Object,
      default() {
        return {};
      }
    },
    TABLE_ID: {
    }, //主表数据
    status:null,
    rejectedNodes:{
      type: Array,
      default: () => {
        return []
      }
    },
    readOnly:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      //修改字段配置
      modifyField: {
        modifiable_field: "选中的字段",
        modifiable_field_name: "", //选中的字段名称1
        totalRowCount: 0, //数据总条数
        pageSize: 10, //每页数据条数
        dataEmptyMessage: "数据为空", //没数据时的提示
        data: {}, //表格数据
        columnsKey: ["value"], //input显示的字段
        columns: ["id"], //模糊搜索隐藏的列
        AutoData: [],
        defaultSelected: []
      },
      pageBtnData: [
        {
          label: "最少同意人数",
          icontype: 1,
          color: "#09A155",
          value: ""
        },
        {
          label: "同意状态别名",
          icontype: 1,
          color: "#09A155",
          value: ""
        },
        {
          label: "最少拒绝人数",
          icontype: 2,
          color: "#ED4014",
          value: ""
        },
        {
          label: "拒绝状态别名",
          icontype: 2,
          color: "#ED4014",
          value: ""
        }
      ],
      status1: false, //超时提醒
      status2: false, //自动处理
      openControl: false, //控制弹框是否显示
      loading: false, // z最大loading
      resultData: {}, // 选中结果
      open: false, // 是否打开
      obj: {}, //传给table的对象
      saveObj: {}, //存储的每次节点的对象
      selectRow: [], //弹框多选单击一行的数据
      approves: "", //审批相关数据
      setOvertime: {
        threshold: "",
        sources: 0,
        status: 1,
        handleValue: "",
        handleType: 11,
        extraMsg: ""
      },
      autoDetail: {
        threshold: "",
        sources: 0,
        status: 1,
        handleType: 20,
        extraMsg: "",
        handleValue: ""
      },
      approvelList: [], //存放审批相关的数据
      closeType: false, //控制审批确定取消显示状态
      isCallInterface: false,
      
      defaultObj:{}  //默认数据
    };
  },
  computed: {
    actServiceS() {
      return [this.setOvertime, this.autoDetail];
    }
  },
  watch: {
    pageBtnData: {
      handler(newVal) {

        let temArr = [
          {
            actType: 0,
            actName: newVal[1].value,
            actLimit: newVal[0].value
          },
          {
            actType: 1,
            actName: newVal[3].value,
            actLimit: newVal[2].value
          }
        ];
        if (this.configData.ruleList.length < 1) {
          this.configData.ruleList = temArr;
        } else {
          this.configData.ruleList.map((item) => {
            temArr.map(inner => {
              if (item.actType === inner.actType) {
                item = Object.assign(item, inner);
              }
            });
          });
        }
      },
      deep: true
    },
    actServiceS: {
      handler(newVal) {
        this.configData.actServiceS = newVal;
      },
      deep: true
    },
    approvelList: {
      handler(newVal) {
        this.configData.approvelList = newVal;
      },
      deep: true
    }
  },
  methods: {
    onBlur(event, ins, key) {
      let res = /^[0-9]*$/;
      if (res.test(key)) {
        if (this.pageBtnData[key].value === "" && key == 0) {
          this.$Message.warning("最少同意人数不能为空");
        }
        if (this.pageBtnData[key].value === "" && key == 1) {
          this.$Message.warning("同意状态别名不能为空");
        }
        if (this.pageBtnData[key].value === "" && key == 2) {
          this.$Message.warning("最少拒绝人数不能为空");
        }
        if (this.pageBtnData[key].value === "" && key == 3) {
          this.$Message.warning("拒绝状态别名不能为空");
        }
      }
    },
    //可修改字段下拉多选事件
    OnFkrpSelected(selected) {
      this.modifyField.modifiableField = "";
      this.modifyField.modifiableFieldName = "";
      let str = "";
      let name = "";
      selected.map(item => {
        str += item.ID + ",";
        name += item.Label + ",";
      });
      if (str.length > 0) {
        str = str.substring(0, str.length - 1);
      }
      if (selected.length > 0) {
        name = name.substring(0, name.length - 1);
      }
      this.modifyField.modifiableField = str.trim();
      this.configData.modifiableField = str.trim();
      this.modifyField.modifiableFieldName = name.trim();
      this.configData.modifiableFieldName = name.trim();
    },
    onPopperShow() {
      //下拉多选
      this.findField({ AD_TABLE_ID: this.TABLE_ID[0].ID });
    },
    changePage(val) {
      this.findField({
        pageSize: this.modifyField.pageSize,
        page: val,
        AD_TABLE_ID: this.TABLE_ID[0].ID
      });
    },
    //模糊查找input事件
    inputChange(val) {
      this.findField({ DESCRIPTION: val, AD_TABLE_ID: this.TABLE_ID[0].ID });
    },
    onClear() {
      this.modifyField.modifiableField = "";
      this.configData.modifiableField = "";
      this.modifyField.modifiableFieldName = "";
      this.configData.modifiableFieldName = "";
    }, //可修改字段清除事件
    change1(val) {
      this.status1 = val;
      this.setOvertime = {
        threshold: "",
        sources: 0,
        status: 1,
        handleValue: "",
        handleType: 11,
        extraMsg: "",
        id:this.setOvertime.id
      }
      
      if (val) {
        this.setOvertime.status = 0;
      } else {
        this.setOvertime.status = 1;
      }
    },
    change2(val) {
      this.status2 = val;
      this.autoDetail = {
        threshold: "",
        sources: 0,
        status: 1,
        handleType: 20,
        extraMsg: "",
        handleValue: "",
        id:this.autoDetail.id
      }
      if (val) {
        this.autoDetail.status = 0;
      } else {
        this.autoDetail.status = 1;
      }
    },
    getResult(data) {
      this.resultData = Object.assign({}, data);
      if (this.resultData.list.length > 0) {
        this.approvelList = this.resultData.list.map(item => {
          let tem = Object.assign({}, item);
          delete tem.string;
          return tem;
        });
      } else {
        this.approvelList = [];
      }
    },
    //获取可修改字段
    findField(param) {
      this.$network.post("/p/c/meta/column/list", param).then(res => {
        if (res.data.code === 0) {
          if (param.hasOwnProperty("DESCRIPTION")) {
            this.modifyField.AutoData = [];
            this.modifyField.AutoData = res.data.data.row.reduce(
              (arr, item) => {
                arr.push({
                  value: item.DESCRIPTION.val,
                  id: item.ID.val
                });
                return arr;
              },
              []
            );
          }
          res.data.data.tabth.map(item => {
            if (item.colname === "DESCRIPTION") {
              item.isak = true;
            } else {
              item.isak = false;
            }
          });
          this.modifyField.data = res.data.data;
          this.modifyField.totalRowCount = res.data.data.totalRowCount;
        }
      });
    },

    saveConfig () {  //确定按钮点击
      if(this.configData.approverStyle === 0){  //直接选择
        // 审批人为空
        if(this.configData.approvelList && this.configData.approvelList.length === 0){
          this.$Modal.fcError({
            title: '错误',
            content: '审批人不能为空',
            mask: true
          })

          return
        }
      }else{  //扩展程序
        // 扩展程序为空
        if(this.configData.actionConfig[0] && !this.configData.actionConfig[0].handleValue){
          this.$Modal.fcError({
            title: '错误',
            content: '扩展程序不能为空',
            mask: true
          })
          return
        }
      }
      // 最少同意人数
      if(!this.pageBtnData[0].value){
        this.$Modal.fcError({
            title: '错误',
            content: '最少同意人数不能为空',
            mask: true
          })
        return
      }
      // 最少拒绝人数
      if(!this.pageBtnData[2].value){
        this.$Modal.fcError({
            title: '错误',
            content: '最少拒绝人数不能为空',
            mask: true
          })
        return
      }

      // 驳回节点
      // if(!this.backId){
      //   this.$Modal.fcError({
      //       title: '错误',
      //       content: '驳回节点不能为空',
      //       mask: true
      //     })
      //   return
      // }

      // 超时提醒
      if(this.status1 && (!this.setOvertime.threshold || !this.setOvertime.handleValue)){
        this.$Modal.fcError({
            title: '错误',
            content: '请填写完善超时提醒信息',
            mask: true
          })
        return
      }
      //自动处理
      if(this.status2 && (!this.autoDetail.threshold)){
        this.$Modal.fcError({
            title: '错误',
            content: '请填写完善自动处理信息',
            mask: true
          })
        return
      }

      // 控制自动处理时间大于超时提醒时间
      if(this.status1 && this.status2){
        let start = this.setOvertime.sources === 0?Number(this.setOvertime.threshold):Number(this.setOvertime.threshold)*24
        let end = this.autoDetail.sources === 0?Number(this.autoDetail.threshold):Number(this.autoDetail.threshold)*24

        if(start >= end){
          this.$Modal.fcError({
              title: '错误',
              content: '超时提醒时间不能大于自动处理时间',
              mask: true
            })
          return
        }
      }
      
      let guiStyle = JSON.parse(this.$parent.$parent.myDesigner.getFlowData())
      guiStyle.nodeDataArray.map(item => {
        if(this.configData.key === item.key){
          item.text = this.configData.name
        }
        return item
      })
      this.$parent.$parent.data.guiStyle = JSON.stringify(guiStyle)
      this.$parent.$parent.init()
      this.$emit('closeDrawer')
    },
    closeDrawer () {  //取消按钮点击
      this.$parent.$parent.nodeMsg[Number(this.configData.key)] = this.defaultObj
      this.$emit('closeDrawer')
    },
    approverStyleChange () {  //选择审批人类型切换
      this.configData.actionConfig[0].handleValue = null
      this.resultData = {}
      this.approvelList = [];
    }
  },
  created() {
    // 保存默认值
    this.defaultObj = JSON.parse(JSON.stringify(this.configData))

    if (this.configData.actionConfig.length === 0) {
      this.configData.actionConfig = [
        {
          id: null,
          handleType: 33,
          handleValue: null,
          extraMsg: null
        }
      ];
    } else {
      this.configData.actionConfig = [
        {
          id: this.configData.actionConfig[0].id,
          handleType: 33,
          handleValue: this.configData.actionConfig[0].handleValue,
          extraMsg: this.configData.actionConfig[0].extraMsg
        }
      ];
    }

    if (this.configData.modifiableField) {
      this.configData.modifiableField.split(",").map((item, index) => {
        this.modifyField.defaultSelected.push({ ID: item });
      });
    }
    if (this.configData.modifiableFieldName) {
      this.configData.modifiableFieldName.split(",").map((item, index) => {
        this.modifyField.defaultSelected[index].Label = item;
      });
    }

    if (
      this.configData.approvelList &&
      this.configData.approvelList.length > 0
    ) {
      this.configData.approvelList.map(item => {
        let temObj = Object.assign({}, item);
        this.approves += item.approveValueName?item.approveValueName:item.approve_value_name + ",";
        temObj.approve_type = temObj.approveType?temObj.approveType:temObj.approve_type;
        temObj.approve_value = temObj.approveValue?temObj.approveValue:temObj.approve_value;
        temObj.approve_value_name = item.approveValueName?item.approveValueName:item.approve_value_name;
        delete temObj.approveType;
        delete temObj.approveValue;
        delete temObj.approveValueName;

        let temL = Object.assign({}, temObj);
        this.approvelList.push(temObj);
        temL.string = item.approveValueName?item.approveValueName:item.approve_value_name;
        this.resultData.list
          ? this.resultData.list.push(temL)
          : this.$set(this.resultData, "list", [temL]);
      });
      this.resultData.total
        ? (this.resultData.total = this.resultData.list.length)
        : this.$set(this.resultData, "total", this.resultData.list.length);
      if (this.approves.length > 0) {
        this.approves = this.approves.substring(0, this.approves.length - 1);
      }
    }

    if (
      this.configData.ruleList &&
      this.configData.ruleList.length > 0
    ) {
      this.configData.ruleList.map(item => {
        if (item.actType === 0) {
          this.pageBtnData[1].value = item.actName;
          this.pageBtnData[0].value = item.actLimit;
        }
        if (item.actType === 1) {
          this.pageBtnData[3].value = item.actName;
          this.pageBtnData[2].value = item.actLimit;
        }
      });
    }

    if (
      this.configData.actServiceS &&
      this.configData.actServiceS.length > 0
    ) {
      this.configData.actServiceS.map(item => {
        if (item.handleType >= 20) {
          this.autoDetail = item;
        } else {
          this.setOvertime = item;
        }
      });
      this.setOvertime.status === 0
        ? (this.status1 = true)
        : (this.status1 = false);
      this.autoDetail.status === 0
        ? (this.status2 = true)
        : (this.status2 = false);
    } else {
      this.configData.actServiceS = [
        {
          threshold: "",
          sources: 0,
          status: 1,
          handleValue: "",
          handleType: 11
        },
        {
          threshold: "",
          sources: 0,
          status: 1,
          handleType: 20,
          handleValue: ""
        }
      ];
    }
    
    // this.getTreeData();
    // this.findField({ AD_TABLE_ID: this.TABLE_ID });
  },
  mounted() {
    //this.getTreeData();
    /**/
  }
};
</script>
<style lang="scss">
.ProcessNodeConfig {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  >p{
      text-align: right;
      margin-top: 16px;

      >button:first-child{
        margin-right: 10px;
      }
    }
  >div{
    flex: 1;
    overflow: auto;
  }
  .nodeSetbox {
    padding: 16px;
    border: 1px solid #dcdee2;
    .boxItem {
      padding: 16px 40px;
      border-bottom: 1px solid #dcdee2;
      &:last-child {
        border-bottom: none;
      }
    }
    .tipMessage {
      color: #929292;
      line-height: 16px;
    }
    .burgeon-form-item {
      margin-bottom: 16px;
      &:last-child {
        margin-bottom: 0px;
      }
    }
    &:last-child {
      padding: 0;
    }
  }
  .requireStyle {
    font-size: 14px;
    vertical-align: middle;
    color: red;
    padding-top: 5px;
    display: inline-block;
  }
  .splitItem {
    font-size: 14px;
    line-height: 40px;
    color: #929292;
    &:first-child{
      margin-top: -10px;
    }
  }
  .burgeon-fkrp-select-icon {
    top: 2px;
  }
}
</style>


