<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addOrEditDialogFlag"
    :title="title"
    :append-to-body="false"
    :close-on-click-modal="false"
    width="100%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <div class="switch">
      <div class="switch_left">
        <ul>
          <li
            v-for="item in tabOptions"
            :key="item.key"
            :class="{ active: activeComp == item.key }"
            @click="activeComp = item.key"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <el-form
      ref="form"
      class="el-form-box"
      :model="form"
      label-width="120px"
      :disabled="true"
      v-show="activeComp == 'main'"
    >
      <el-row :gutter="15">
        <el-col :span="4">
          <headerTitle title="基本信息"></headerTitle>
          <el-row>
            <el-col :span="24">
              <el-form-item label="编码" prop="code">
                <el-input v-model="form.code" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="名称" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="类型" prop="type">
                <el-select v-model="form.type" clearable style="width: 100%">
                  <el-option label="年度" :value="1"></el-option>
                  <el-option label="季度" :value="2"></el-option>
                  <el-option label="月度" :value="3"></el-option>
                  <!-- <el-option label="周" :value="2"></el-option> -->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="目标对象" prop="assessmentObject">
                <el-select
                  v-model="form.assessmentObject"
                  clearable
                  style="width: 100%"
                >
                  <el-option label="公司" :value="1"></el-option>
                  <el-option label="部门" :value="2"></el-option>
                  <el-option label="个人" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="24"
              v-if="form.assessmentObject == 2 || form.assessmentObject == 3"
            >
              <el-form-item label="部门" prop="groupId">
                <el-input v-model="form.departmentName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.assessmentObject == 3">
              <el-form-item label="姓名" prop="userId">
                <el-input v-model="form.userName" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="统计财年" prop="assessmentDimensions">
                <el-date-picker
                  type="years"
                  style="width: 100%"
                  v-model="form.assessmentDimensions"
                  placeholder="选择一个或多个年"
                  format="yyyy"
                  value-format="yyyy"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="起始月份" prop="assessmentCycle">
                <el-select
                  v-model="form.assessmentCycle"
                  clearable
                  style="width: 100%"
                >
                  <el-option label="1月" :value="1"></el-option>
                  <el-option label="2月" :value="2"></el-option>
                  <el-option label="3月" :value="3"></el-option>
                  <el-option label="4月" :value="4"></el-option>
                  <el-option label="5月" :value="5"></el-option>
                  <el-option label="6月" :value="6"></el-option>
                  <el-option label="7月" :value="7"></el-option>
                  <el-option label="8月" :value="8"></el-option>
                  <el-option label="9月" :value="9"></el-option>
                  <el-option label="10月" :value="10"></el-option>
                  <el-option label="11月" :value="11"></el-option>
                  <el-option label="12月" :value="12"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="负责人" prop="superintendentName">
                <el-input v-model="form.superintendentName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="可见人" prop="superintendentName">
                <el-input v-model="participantsName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="describes">
                <el-input v-model="form.describes" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="20">
          <headerTitle title="目标"></headerTitle>
          <vue2-org-tree
            name="test"
            :data="treeData"
            :collapsable="true"
            :render-content="renderContent"
            horizontal="horizontal"
            @on-expand="onExpand"
            ref="testRef"
          />
        </el-col> </el-row
    ></el-form>

    <div slot="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
    <bpmDetail
      v-if="activeComp === 'bpm' && form.processInstanceId"
      :id="form.processInstanceId"
    ></bpmDetail>
  </ele-modal>
</template>
<script>
  import dictMixins from '@/mixins/dictMixins';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
  import { getById } from '@/api/targetManage/index.js';
  const Decimal = require('decimal.js')
  export default {
    mixins: [dictMixins],
    components: { bpmDetail },
    data() {
      return {
        form: {
          name: '', //名称
          targetDefinitionList: [], //目标规则
          assessmentObject: '', // //考核对象 1公司 2部门 3个人
          assessmentDimensions: [], //统计财年
          assessmentCycle: '', //起始月份
          departmentId: '', //部门id
          departmentName: '', //部门名称
          userId: '', //用户id
          userName: '', //用户名称
          superintendentId: '', //负责人id
          superintendentName: '', //负责人名称
          participantsId: '',
          participantsName: '',
          status: '',
          type: 1,
          describes: '',
          processInstanceId: ''
        },
        title: '',
        unitOption: [],
        participantsName: '',
        addOrEditDialogFlag: false,
        treeData: { label: '销售目标', children: [], expand: true },
        fullscreen: false,
        targetDefinitionList: [],
        activeComp: 'main',
        tabOptions: [
          { key: 'main', name: '目标详情' },
          { key: 'bpm', name: '流程详情' }
        ]
      };
    },
    mounted() {},
    created() {},
    methods: {
      renderContent(h, data) {
        let ratio = +(
          (data.number /
            (data.unit == '万元' ? data.value * 10000 : data.value)) *
            100 || 0
        ).toFixed(1);
        return (
          <div>
            <div class={!data.type ? 'treeItem1 treeItem' : 'treeItem'}>
              <span class="label">{data.label}</span>
              {data.type && <span class="tree_value">{data.value || 0}</span>}
              {data.type && <span class="tree_unit">{data.unit}</span>}
            </div>
            
            {(data.type && data.value && data.number &&data.number!=0&& (
              <span class="label">
                完成：
                {data.unit == '万元' ? Decimal(data.number).div(Decimal(10000)).toString() : data.number}
                {data.unit}
              </span>
            )) ||
              ''}

            {(data.type &&
              data.value &&
              h('el-progress', {
                attrs: {
                  percentage: ratio
                }
              })) ||
              ''}
          </div>
        );
      },

      //初始化
      async open(row = {}) {
        this.addOrEditDialogFlag = true;
        this.title = '';
        this.activeComp = 'main';
        this.form = await getById(row.id);
        // console.log( this.form,' this.form')
        this.form.assessmentDimensions =
          this.form.assessmentDimensions.split(',');
        this.treeData.children = this.form.targetDefinitionList;
        if (this.form.discernibleUserList) {
          this.participantsName = this.form.discernibleUserList
            .map((item) => item.name)
            .toString();
        }
      },

      onExpand(e, data) {
        if ('expand' in data) {
          data.expand = !data.expand;
          if (!data.expand && data.children) {
            this.collapse(data.children);
          }
        } else {
          this.$set(data, 'expand', true);
        }
      },
      collapse(list) {
        var _this = this;
        list.forEach(function (child) {
          if (child.expand) {
            child.expand = false;
          }
          child.children && _this.collapse(child.children);
        });
      },

      //关闭弹窗
      cancel() {
        this.addOrEditDialogFlag = false;
      }
    }
  };
</script>
<style scoped lang="scss">
  @import '~vue2-org-tree/dist/style.css';
  :deep(.treeItem1) {
    padding: 15px 15px !important;
    color: #3942a7;
    background: url(../../../../assets/main_item.png);
    background-size: cover;
    .label {
      font-size: 14px;
      font-weight: bold;
    }
  }
  :deep(.org-tree-node-btn) {
    background-color: #bb90f5;
  }
  :deep(.treeItem) {
    display: flex;
    justify-content: center;
    padding: 6px 15px;
    align-items: center;
    .label {
      display: flex;
      // maxwidth: 100%;
      min-width: 80px;
      justify-content: center;
      align-items: center;
    }
    .ratioInput {
      width: 77px;
    }
    .valueInput,
    .tree_value {
      width: 105px;
    }
    .tree_value {
      background: #f1f1f1;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tree_unit {
      margin-left: 10px;
    }
    .el-select {
      width: 80px;
    }
    .el-input {
      width: auto;
    }
    input {
      margin-left: 5px;
    }
    .el-input__suffix {
      line-height: 36px;
    }
  }

  :deep(.long-dialog-form .el-dialog__body) {
    max-height: calc(100vh - 192px);
    min-height: 700px;
  }
  :deep(.org-tree-node-label .org-tree-node-label-inner) {
    padding: 0;
  }
  :deep(
      .horizontal .org-tree-node.collapsed,
      .horizontal .org-tree-node.is-leaf
    ) {
    padding-bottom: 8px;
    padding-top: 8px;
  }
  :deep(.el-progress) {
    width: 100%;
    padding: 3px;
    display: flex;
    align-items: center;
    flex-direction: column;
    .el-progress__text {
      color: #1890ff !important;
      // width: 41px;
      // text-align: left;
      margin-top: 5px;
    }
  }
</style>
