//更多
<template>
  <div>
    <van-action-sheet
      v-model="showOrder"
      cancel-text="取消"
    >
      <div
        v-for="(item, i) of orderList"
        :key="i"
        @click="orderItemClick(item.value)"
      >
        <div class="icon"><i :class="item.icon" class="btn-icon"></i></div>
        <div class="itemName">{{ item.name }}</div>
      </div>
    </van-action-sheet>
    <!-- 相关信息 -->
    <RelevantInformation
      ref="RelevantInformation"
      :instId="instId"
    ></RelevantInformation>
    <!-- 催办记录 -->
    <CuiBanRecord ref="CuiBanRecord" :instId="instId"></CuiBanRecord>
    <!-- 跟踪 -->
    <Tracking ref="Tracking" :instId="instId" :def-id="defId"></Tracking>
    <!--  传阅-->
    <CirculatedButton
      ref="CirculatedButton"
      :task-id="taskId"
      :inst-id="instId"
      :node-id="nodeId"
      :notice-id="noticeId"
      @closePop="
        () => {
          return (showOrder = false)
        }
      "
    ></CirculatedButton>
    <!--  沟通-->
    <Communication
      ref="Communication"
      :instId="instId"
      :def-id="defId"
      :node-id="nodeId"
      :notice-id="noticeId"
      @closePop="
        () => {
          return (showOrder = false)
        }
      "
    ></Communication>
  </div>
</template>

<script>
  import RelevantInformation from '@/views/matter/components/RelevantInformation'
  import CuiBanRecord from '@/views/matter/components/CuiBanRecord'
  import Tracking from '@/views/matter/components/Tracking'
  import CirculatedButton from '@/views/matter/components/CirculatedButton'
  import Communication from '@/views/matter/components/Communication'
  import { processIsOver } from '@/api/process'
  export default {
    props: {
      instId: {
        type: String,
        default: '',
      },
      defId: {
        type: String,
        default: '',
      },
      taskId: {
        type: String,
        default: '',
      },
      noticeId: {
        type: String,
        default: '',
      },
      nodeId: {
        type: String,
        default: '',
      },
      instId: {
        type: String,
        default: '',
      },
    },
    components: {
      RelevantInformation,
      CuiBanRecord,
      Tracking,
      CirculatedButton,
      Communication,
    },
    data() {
      return {
        showOrder: false,
        orderList: [
          {
            name: '跟踪',
            value: 'Tracking',
            icon: 'icon-genzong',
          },
          {
            name: '沟通',
            value: 'Communication',
            icon: 'icon-goutong1',
          },
          {
            name: '传阅',
            value: 'CirculatedButton',
            icon: 'icon-chuanyue',
          },
          {
            name: '相关信息',
            value: 'RelevantInformation',
            icon: 'icon-xiangguanxinxi',
          },
          {
            name: '催办记录',
            value: 'CuiBanRecord',
            icon: 'icon-cuibanjilu',
          },
        ],
      }
    },
    methods: {
      orderItemClick(val) {
        if (val == 'Tracking') {
          processIsOver(this.instId, (res) => {
            if (res.state) {
              this.$refs[val].showDialog()

              return
            } else {
              this.$toast.fail(res.message)
              return
            }
          })
        } else this.$refs[val].showDialog()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .van-action-sheet__content {
    background: #f9f9f9;
    display: flex;
    flex-wrap: wrap;
    padding-top: 16px;
    & > div {
      margin-bottom: 24px;
      width: 25%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .icon {
      display: flex;

      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: #ffffff;
      border-radius: 8px 8px 8px 8px;
      margin-bottom: 8px;
      .btn-icon {
        font-size: 24px;
      }
    }
    .itemName {
      font-size: 14px;
      font-weight: 400;
    }
  }
  .van-popup {
    height: 260px;
  }
</style>