<template>
  <div>
    <t-drawer :visible="workflowSettingVisible" @close="handleClose" :size="size" :onConfirm="handleConfirm" :closeOnOverlayClick="false">
      <template #header>
        <div v-show="!workflowDisable" style="width:100%" >
          <t-input v-show="ischangename" :readonly="workflowDisable" @blur='changename1()' v-model="name" style="width:100%"></t-input>
           <div v-show="!ischangename " class="name-text">{{name}}<icon name="edit" @click="changename()" size="medium" style="margin-left:8px;color: #9b9b9b;" /></div>
        </div>
        <div  v-show="workflowDisable">
          {{name}}
        </div>
      </template>
      <div class="t-drawer-demo-div">
        <span>环节类型</span>
        <t-input v-model="config.content" readonly />
      </div>
      <div class="t-drawer-demo-div">
        <span><span class="redstar">*</span>推送规则</span>
        <div>
          <t-radio-group name="tsgz" :disabled="workflowDisable" v-model="config.sendRuleVO.cyzlb" :options="tsgzOptions" @change="tsgzChange"></t-radio-group>
        </div>
      </div>
      <div class="t-drawer-demo-div">
        <span><span class="redstar">*</span>推送组织层级范围</span>
        <t-select :readonly="workflowDisable" v-model="config.sendRuleVO.cyzjgfw" :options="options1" multiple @change="tszzcjfwChange" />
        <span class="redstar" v-show="config.sendRuleVO.cyzjgfw.length==0 && isclick">推送组织层级范围不能为空</span>
      </div>
      <div class="t-drawer-demo-div">
        <span><span class="redstar">*</span>参与者角色</span>
        <t-select :readonly="workflowDisable" v-model="config.sendRuleVO.cyzgw" :options="options2" multiple @change="cyzjsChange" />
        <span class="redstar" v-show="config.sendRuleVO.cyzgw.length==0 && isclick">参与者角色不能为空</span>
      </div>
    </t-drawer>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import api from '../../api/zdysh/index';
import { Icon } from 'tdesign-icons-vue';
export default {
  components: { Icon },
  data() {
    return {
      visible: false,
      tsgzOptions: [
        {
          value: '1',
          label: '人员',
        },
        {
          value: '2',
          label: '角色',
        },

      ],
      options1: [],
      options2:[],
      name:'',
      config: {
        index:'',
        nodeName: '',
        content:'',
        sendRuleVO:{
           hjlx: '',
        cyzlb: 1,
        cyzjgfw: [],
        cyzgw: [],
        }
         
      },
      workflowDisable:false,
      oldconfig:{},
      oldname:'',
      ischangename:false,
      isclick:false,
      size:'40vw'
    };
  },
  computed: {
    ...mapState({
      workflowSettingVisible: (state) => state.workflow.workflowSettingVisible,
      workflowSettingConfig: (state) => state.workflow.workflowSettingConfig,
       workflowSettingRowData: (state) => state.workflow.workflowSettingRowData,
       workflowSettingDisable: (state) => state.workflow.workflowSettingDisable,
        workflowSettingConfigobj: (state) => state.workflow.workflowSettingConfigobj,
    }),
  },
  mounted(){
    console.log(11111);
    const { zzuuid,zdylcid,workflowSettingDisable} = this.$route.query;
    console.log('workflowSettingConfig1',this.workflowSettingConfig);
    this.getCyzJs({zzuuid: zzuuid});
    this.getZzcjfw({zzuuid: zzuuid});
    if(workflowSettingDisable!='Y'){
      this.workflowDisable = true;
      this.ischangename = true;
    };

  },
  watch: {
    workflowSettingConfig: {
      handler(config) {
        console.log('watch里面workflowSettingConfig',config.index);
        console.log('watch里面workflowSettingConfigobj2',this.workflowSettingConfigobj);
        this.name = config.name;
        this.config.index = config.index;
        this.config.content = config.index == 1?'申报申请':'申报审核';
        this.config.sendRuleVO.cyzlb = this.workflowSettingConfigobj[config.index-1].sendRuleVO.cyzlb;
        this.config.sendRuleVO.cyzjgfw = this.workflowSettingConfigobj[config.index-1].sendRuleVO.cyzjgfw;
        this.config.sendRuleVO.cyzgw = this.workflowSettingConfigobj[config.index-1].sendRuleVO.cyzgw;
        this.oldconfig = JSON.stringify(this.config);
        this.oldname = this.name;
      },
      deep: true,
    },
  },
  methods: {
    ...mapMutations(['SET_WORKFLOWSETTINGVISIBLE','SET_WORKFLOWSETTINGCONFIG']),
    handleConfirm() {
      this.isclick = true;
      if(this.config.sendRuleVO.cyzjgfw.length==0 || this.config.sendRuleVO.cyzgw.length==0){
        return
      }
      this.workflowSettingConfigobj[this.config.index-1].name = this.name;
      this.workflowSettingConfigobj[this.config.index-1].sendRuleVO.cyzlb = this.config.sendRuleVO.cyzlb ;
      this.workflowSettingConfigobj[this.config.index-1].sendRuleVO.cyzjgfw =this.config.sendRuleVO.cyzjgfw  ;
      this.workflowSettingConfigobj[this.config.index-1].sendRuleVO.cyzgw =this.config.sendRuleVO.cyzgw ;
      console.log('watch里面workflowSettingConfigobj21',this.workflowSettingConfigobj);
      // console.log('workflowSettingConfig1',this.workflowSettingConfig);
      // this.SET_WORKFLOWSETTINGCONFIG(this.config);
      // this.workflowSettingConfig.name = this.name;
      // this.workflowSettingConfig.content = this.config.content;
      // this.workflowSettingConfig.sendRuleVO =this.config.sendRuleVO;
      // this.ischangename = false;
      this.SET_WORKFLOWSETTINGVISIBLE(false);
    },
    handleClose(){
      this.name  = this.oldname;
      this.ischangename = false;
      console.log(this.oldconfig);
      this.config =JSON.parse(this.oldconfig);
      console.log(this.oldconfig);
      this.SET_WORKFLOWSETTINGVISIBLE(false);
    },
    changename(){
      this.ischangename=true;
    },
    changename1(){
      this.ischangename=false;
      console.log('111111changename1');
    },
    tszzcjfwChange() {},
    cyzjsChange() {},
    tsgzChange() {},
     async getZzcjfw(data) {
      try {
        const res = await api.getZzcjfw(data);
        (res.data).map((item)=>{
          item.value = item.code;
          item.label = item.caption
        })
        this.options1 = res.data;
        console.log('getZzcjfw',res);
        // this.formData.lcsx = this.options2[0].value;
      } catch (e) {}
    },
     async getCyzJs(data) {
      console.log('getCyzJs');
      try {
        const res = await api.getCyzJs(data);
        (res.data).map((item)=>{
          item.value = item.code;
          item.label = item.caption
        })
        this.options2 = res.data;
        console.log('getZzcjfw',res);
        // this.formData.lcsx = this.options2[0].value;
      } catch (e) {}
    },
  },
};
</script>
<style scoped>
.t-button {
  margin-right: 20px;
}
.t-drawer-demo-div {
  margin-bottom: 24px;
}
.redstar{
  font-size: 12px;
  color: red;
}
</style>
