<!-- @desc:工艺流程连线弹窗  @auth:张潇木  @time:2023/1/29 10:13 -->
<template>
  <div>
    <DkModal
     title="工艺路线"
     width="800"
     v-model="modalDisplay"
     :mask-closable="false"
     draggable
     sticky
     @modalOk="modalOk"
     @modalCancel="modalCancel"
     @on-cancel="modalCancel">
<!--      {{edgeData}}-->
      <DkForm ref="formInline" :col-count="2" >
        <!--    默认分级    -->
        <DkFormItem prop="pdtGradeIds" :data-type="$config.dataType.array">
          <SelectPop ref="pdtGradeIds" v-model="edgeData.pdtGradeIds" label-key="gradeName" value-key="gradeId" :multiple="true" :options="productGradeList" />
        </DkFormItem>
        <!--    成型标签    -->
        <DkFormItem prop="moldlineTags" :data-type="$config.dataType.array" :info="$config.nodeInfo.moldlineTags">
          <SelectPop ref="moldlineTags" v-model="edgeData.moldlineTags" label-key="dataValue" value-key="dataId" :multiple="true"
                     :options="dictionaryDataList.filter(it => it.dictCode === $config.dictType.moldlineTag)" />
        </DkFormItem>
        <!--    备注    -->
        <DkFormItem prop="remarks" :span="24">
          <InputPop ref="remarks" v-model="edgeData.remarks" maxlength=500 textareaFlag/>
        </DkFormItem>
      </DkForm>
      <!--   表格   -->
      <Divider></Divider>
      <div style="display: flex">
        <!--    工序在制品    -->
        <EditTable ref="pdtTable" :data="edgeData.pdtList"
                   :columns="pdtColumns"
                   enabledRepeatId="modelId"
                   controlId="pdtModelId"
                   :height="200"
                   :showSeqBtnFlag="false"
                   :enabledRepeat="false"
                   :show-setting-flag="false"/>
      </div>
    </DkModal>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import Process from '@/view/process/process-flow/config/ProcessConfig'
export default {
  name: 'EdgeModal',
  props: {
    dictionaryDataList:{
      type:Array,
      default: ()=>[]
    },
    productGradeList:{
      type:Array,
      default: ()=>[]
    },
  },
  computed: {
    ...mapState(['process']),
  },

  data() {
    let self=this
    return {
      graph: null,//图形对象
      modalDisplay:false,//如不定义此变量，则进入modal无动画
      edgeData: {},
      edgeDataSocial:{},//原始值
      pdtColumns: [
        {
          field: 'pdtModelCode',
          type: 'tableSelect',
          controlId: 'pdtModelId',
          param: () => {
            return {}
          },
          sortBoolean: false,
          dataType: self.$config.tableSelectType.product,
          fieldUpdate: self.$updateColumns.processNodeChooseProduct,
          width: 'auto',
        },
        { field: 'pdtModelName', type: 'disabled', width: 'auto' },
        { field: 'categoryName', type: 'disabled', width: 'auto' },
        { field: 'remarks', type: 'text', width: 'auto' },
      ],
      //条件label样式
      conditionLabel:{
        markup: [
          {
            tagName: 'rect',
            selector: 'labelBody',
          },
          {
            tagName: 'text',
            selector: 'labelText',
          },
        ],
        attrs: {
          labelText: {
            fontSize:22,
            text: '!',
            fill: '#4169E1',
            textAnchor: 'middle',
            textVerticalAnchor: 'middle',
          },
          labelBody: {
            ref: 'labelText',
            refX: -8,
            refY: -1,
            refWidth: '100%',
            refHeight: '100%',
            refWidth2: 16,
            refHeight2: 2,
            stroke: '#4169E1',
            fill: '#fff',
            strokeWidth: 1,
            rx: 6,
            ry: 6,
          },
        },
      },
    }
  },
  created() {
    if (this.graph == null) this.graph = Process.graph
    this.edgeData = this.graph.getCellById(this.process.currentEdgeId)?.data;
    //记录初始值
    this.edgeDataSocial = JSON.parse(JSON.stringify(this.edgeData))
  },
  mounted() {
    this.modalDisplay=true
  },
  methods: {
    ...mapMutations(['setProcessEdgeModalDisplay','setCurrentEdgeId']),
    /**
     * @desc   : 确定
     * @author : 张潇木
     * @date   : 2023/1/5 10:38
     */
    modalOk(){
      this.edgeData.pdtList=this.$refs.pdtTable?.getTableDataFilter()?.map((it) => {
        return {
          flowId:parseInt(this.$route.params.id),
          routeId:this.process.currentEdgeId,
          pdtModelId:it.pdtModelId,
          pdtModelCode:it.pdtModelCode,
          pdtModelName:it.pdtModelName,
          categoryName:it.categoryName,
          remarks:it.remarks,
          ftyId:this.$store.state.user.ftyId
        }
      })
      this.edgeData.cntPdtModel = this.edgeData.pdtList?.length // 在制品型号数量
      //获取图形
      let cell = this.graph.getCellById(this.process.currentEdgeId);
      //设置业务数据
      cell.setData(this.edgeData,{overwrite:true})
      //设置样式
      if(Object.keys(cell.data).length!=0&&
        ((cell?.data?.pdtGradeIds&&cell?.data?.pdtGradeIds.length>0)||(cell?.data?.moldlineTags&&cell?.data?.moldlineTags.length>0)||this.edgeData.pdtList.length>0)){
        cell.setLabels(this.conditionLabel)
      }else{
        cell.removeLabelAt(0);
      }
      cell.setAttrs({ line: { stroke: '#A2B1C3', }, },);
      this.setProcessEdgeModalDisplay(null)
      this.setCurrentEdgeId(undefined)
    },
    /**
     * @desc   : 取消
     * @author : 张潇木
     * @date   : 2023/1/5 10:38
     */
    modalCancel(){
      //还原路线数据
      let cell = this.graph.getCellById(this.process.currentEdgeId);
      cell.setData(this.edgeDataSocial,{overwrite:true})
      cell.setAttrs({ line: { stroke: '#A2B1C3', }, },);
      this.setProcessEdgeModalDisplay(null)
      this.setCurrentEdgeId(undefined)
    },
  }

}
</script>

<style scoped>
/deep/ .ivu-radio-wrapper{
  font-size: 12px!important;
}
.ivu-divider-horizontal{
  margin: 12px 0!important;
}
</style>
