<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addOrEditDialogFlag"
    :append-to-body="false"
    :close-on-click-modal="false"
    width="80%"
    :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="0"
      v-show="activeComp == 'main'"
      style="padding: 0px 15px"
    >
      <el-row :gutter="15">
        <el-descriptions title="基本信息" :column="4">
          <el-descriptions-item label="编码">
            {{ form.code }}
          </el-descriptions-item>
          <el-descriptions-item label="类型">
            {{ getDictValue('市场活动类型', form.type) }}
          </el-descriptions-item>
          <el-descriptions-item label="主题">{{
            form.name
          }}</el-descriptions-item>

          <el-descriptions-item label="发起人">
            {{ form.promoterName }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="来访信息" :column="4">
          <el-descriptions-item label="来访单位">
            {{ form.visitingUnitsName }}
          </el-descriptions-item>

          <el-descriptions-item label="人数">
            {{ form.numberOfVisitors }}
          </el-descriptions-item>
          <el-descriptions-item label="负责人">
            {{ form.commanderName }}
          </el-descriptions-item>
          <el-descriptions-item label="职位">
            {{ form.positionName }}
          </el-descriptions-item>
          <el-descriptions-item label="联系方式">
            {{ form.phone }}
          </el-descriptions-item>
          <el-descriptions-item label="时间">
            {{ form.start }}
            <span style="margin-left: 15px" v-if="TimeArr.length > 1">
              {{ getTimeArr }} 天
            </span>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="接待人信息" :column="4">
          <el-descriptions-item label="接待部门">
            {{ form.receptionDepartmentName }}
          </el-descriptions-item>
          <el-descriptions-item label="接待人">
            {{ form.receptionUserName }}
          </el-descriptions-item>
          <el-descriptions-item label="外部接待人">
            {{ form.receptionUserName1 }}
          </el-descriptions-item>
          <el-descriptions-item label="费用归属人">
            {{ form.costOwnerName }}
          </el-descriptions-item>
          <el-descriptions-item label="欢迎标语" :span="4">
            {{ form.welcomeSign }}
          </el-descriptions-item>
          <el-descriptions-item label="接待流程" :span="4">
            {{ form.remark }}
          </el-descriptions-item>
        </el-descriptions>
      </el-row>
      <el-row
        :gutter="15"
        style="margin-top: 20px"
        v-if="form.receptionProjectList.length > 0"
      >
        <el-col :span="24">
          <el-tabs
            v-model="activeName"
            type="border-card"
            style="height: calc(100% - 124px); width: 100%"
          >
            <el-tab-pane
              v-for="item in form.receptionProjectList"
              :label="item.name"
              :name="item.refKey"
              :key="item.refKey"
            >
              <taskInfoTable
                :dialogType="'view'"
                ref="taskInfoTableRef"
                v-if="item.name == '用车'"
                :key="'用车'"
              ></taskInfoTable>
              <mealList
                ref="mealListRef"
                :dialogType="'view'"
                v-if="item.name == '用餐'"
                :organizationList="organizationList"
              ></mealList>
              <putUpList
                :dialogType="'view'"
                ref="putUpRef"
                v-if="item.name == '住宿'"
              ></putUpList>
              <souvenirList
                :dialogType="'view'"
                ref="souvenirListRef"
                v-if="item.name == '纪念品'"
                :organizationList="organizationList"
              ></souvenirList>
              <conferenceList
                :dialogType="'view'"
                ref="conferenceListRef"
                v-if="item.name == '会议'"
                :organizationList="organizationList"
              ></conferenceList>
              <companyList
                :dialogType="'view'"
                ref="companyListRef"
                v-if="item.name == '公司参观'"
                :organizationList="organizationList"
              ></companyList>
              <visitList
                :dialogType="'view'"
                ref="visitListRef"
                v-if="item.name == '景点游览'"
                :organizationList="organizationList"
              ></visitList>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="addOrEditDialogFlag = false">返回</el-button>
    </div>
    <bpmDetail
      v-if="activeComp === 'bpm' && form.businessId"
      :id="form.businessId"
    ></bpmDetail>
  </ele-modal>
</template>
<script>
  const defForm = {
    name: '', //名称
    type: '', //类型
    state: '', //状态
    promoterId: '', //发起人id
    promoterName: '', //发起人名称
    visitingUnits: '', //来访单位id
    visitingUnitsName: '', //来访单位名称
    numberOfVisitors: '', //来访人数
    commanderId: '', //负责人id
    commanderName: '', //负责人名称
    positionId: '', //职位id
    positionName: '', //职位名称
    phone: '', //电话
    start: '', //开始时间
    end: '', //结束
    receptionDepartmentId: [], //接待部门id
    receptionDepartmentName: '', //接待部门名称
    receptionUserId: [], //接待人id
    receptionUserName: '', //接待人名称
    costOwnerId: '', //费用归属人id
    costOwnerName: '', //归属人名称
    welcomeSign: '', //欢迎标语
    receptionProjectList: [] //接待项目
  };
  import { getById } from '@/api/marketManagem/index';

  import bpmDetail from '@/views/bpm/processInstance/detail.vue';

  import dictMixins from '@/mixins/dictMixins';

  //车
  import taskInfoTable from './taskInfoTable.vue';
  //用餐
  import mealList from './mealList.vue';
  //纪念品
  import souvenirList from './souvenirList.vue';
  //会议
  import conferenceList from './conferenceList.vue';
  //参观
  import companyList from './companyList.vue';
  //游览
  import visitList from './visitList.vue';
  //住宿
  import putUpList from './putUpList.vue';
  export default {
    components: {
      taskInfoTable,
      mealList,
      souvenirList,
      conferenceList,
      companyList,
      putUpList,
      visitList,
      bpmDetail
    },
    mixins: [dictMixins],
    computed: {
      getTimeArr() {
        let [start, end] = this.TimeArr;
        return (
          Math.ceil(
            (new Date(end).getTime() - new Date(start).getTime()) /
              1000 /
              60 /
              60 /
              24
          ) || ''
        );
      }
    },
    data() {
      return {
        activeComp: 'main',
        tabOptions: [
          { key: 'main', name: '详情' },
          { key: 'bpm', name: '审批流程' }
        ],
        fullscreen: false,
        checkList: [],
        TimeArr: [],
        addOrEditDialogFlag: false,
        activeName: '',
        organizationList: [],
        form: { ...defForm },

        rules: {}
      };
    },
    mounted() {},
    created() {
      this.requestDict('市场活动类型');
    },
    methods: {
      //初始化
      async open(row = {}, type) {
        this.addOrEditDialogFlag = true;

        this.form = await getById(row.id);
        this.$nextTick(() => {
          this.form.receptionProjectList.forEach((item) => {
            if (
              this.$refs[item.refKey] &&
              this.$refs[item.refKey][0].putTableValue
            ) {
              this.$refs[item.refKey][0].putTableValue(item.tableList);
            }
            this.checkList.push(item.refKey);
          });
          this.activeName = this.checkList[0];
          if (this.form.start && this.form.end) {
            this.TimeArr = [this.form.start, this.form.end];
          }
        });
      }
    }
  };
</script>
<style scoped lang="scss">
  :deep(.el-input__inner) {
    border: none;
  }
  :deep(.el-input-group__append) {
    border-left: 1px solid var(--border-color-base);
  }
  :deep(.el-descriptions--medium.is-bordered .el-descriptions-item__cell) {
    padding: 2px;
  }
  :deep(.el-descriptions-item__label) {
    color: #333;
    text-align: center !important;
  }
  :deep(.el-form-box .el-form-item) {
    margin-bottom: 0 !important;
  }
  :deep(.el-descriptions__header) {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  :deep(.el-textarea__inner) {
    border: none;
  }
  :deep(.el-descriptions__title) {
    color: #1890ff;
  }
  :deep(.el-tabs__item) {
    font-size: 16px;
    font-weight: 800;
  }
</style>
