<template>
  <div class="body-layer">
    <div class="body-head">
      <h3>{{title}}</h3>
    </div>

    <el-table
      ref="multipleTable"
      :data="dataList.state"
      tooltip-effect="dark"
      style="width: 100%"
      @row-click="selectRow"
    >
      <el-table-column label="房源编码" prop="houseTitle" v-slot:default="{ row }">
        <span  @click="shareRow(row)" style="cursor: pointer">{{row.roomlistingId}}</span>
      </el-table-column>
      <el-table-column label="所属小区" prop="gardenName"></el-table-column>
      <el-table-column label="楼栋-单元" v-slot:default="{ row }">
        {{row.buildingUnit}}
      </el-table-column>
      <el-table-column label="房号" v-slot:default="{ row }">
        {{row.roomNumber}}
      </el-table-column>
      <el-table-column label="建筑面积" prop="buildArea"></el-table-column>
      <el-table-column label="套内面积" prop="roomArea"></el-table-column>
      <el-table-column label="维护人" prop="maintenanceman"></el-table-column>
      
      <el-table-column label="提审时间" prop="arraignmentTime"></el-table-column>
      <el-table-column label="审核状态" prop="auditStatus" v-slot:default="{ row }">
        <div class="status" :class="{interactive: row.auditStatus !== draftStatus || row.reviewer || row.reviewTime}" @click="(row.auditStatus !== draftStatus || row.reviewer || row.reviewTime) && showSelectRow(row)">
          <span>{{getStatusName(row.auditStatus)}}</span>
          <template v-if="row.auditStatus !== draftStatus || row.reviewer || row.reviewTime">
            <i class="el-icon-document" v-if="row.auditStatus !== noAdoptStatus && row.auditStatus !== noComAdoptStatus"></i>
            <i class="el-icon-warning-outline error" v-else></i>
          </template>
        </div>
      </el-table-column>
      <el-table-column label="审核人" prop="reviewer"></el-table-column>
      <el-table-column label="审核时间" prop="reviewTime"></el-table-column>
      <el-table-column label="操作" v-slot:default="{ row }">
        <span class="oper-span" @click="shareRow(row)" v-if="false">预览</span>
        <span class="oper-span"
          :class="{
            disable: !(
              (row.auditStatus === noAuditStatis && (user.role === 'admin' || user.role === 'group')) ||
              (row.auditStatus === noComAuditStatus && (user.role === 'admin' || user.role === 'region'))
            )
          }" 
          @click="() => {(
            (row.auditStatus === noAuditStatis && (user.role === 'admin' || user.role === 'group')) ||
            (row.auditStatus === noComAuditStatus && (user.role === 'admin' || user.role === 'region'))
          ) &&  oper.readyUpdate(row); oper.state.operStatus = 1}" 
          v-if="auth.update">
          审核
        </span>
        <!-- <span
          v-if="auth.update"
          class="oper-span"
          :class="{disable: !~[adoptStatus, uplineStatus].indexOf(row.auditStatus)}"
          @click="~[adoptStatus, uplineStatus].indexOf(row.auditStatus) && offlineItem(row)">
          {{row.auditStatus === uplineStatus ? '下线' : '上线' }}
        </span> -->
      </el-table-column>
    </el-table>
    <com-pagination
      @size-change="pag.sizeChange"
      @current-change="pag.currentChange"
      :current-page="pag.state.currPage"
      :page-size="pag.state.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pag.state.total"/>
  </div>

  <com-record v-model:show="recordData.show" :data="recordData.id" v-if="recordData.show" />
  
  <com-dialog title="审核" v-model:show="oper.state.show" @submit="updateExamine()">
    <el-form ref="form" :model="oper.state" label-width="120px" class="examine-from">
      <el-form-item label="审核结果：">
        <el-radio-group v-model="oper.state.operStatus">
          <el-radio v-for="item in examineMap" :key="item.value" :label="item.value">{{item.name}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审核备注：">
        <el-input type="textarea" v-model="oper.state.maker" maxlength="500" show-word-limit></el-input>
      </el-form-item>
    </el-form>
  </com-dialog>

  
  <com-share
    :setLogo="auth.update"
    v-if="shareData.show"
    v-model:show="shareData.show" 
    :items="shareData.data" />

</template>

<script>

import axios from 'axios';
import { computed } from "vue";
import comDialog from "@/components/dialog";
import comPagination from "@/components/pagination";
import comRecord from "@/view/properties/community/second-house/record";
import comShare from "@/view/properties/estate/share";
import qrcode from 'qrcode'
import user from '@/state/user'
import {
  secondHouseOnline,
  secondHouseExamine
} from '@/request/config'
import { 
  EXAMINE_SHOW_SELECT_STATUS_3 as EXAMINE_SHOW_SELECT_STATUS_TEXT,
  HOUSE_TYPE_SELECT, 
  EXAMINE_REQ_SELECT,
  EXAMINE_SHOW_STATUS, 
  EXAMINE_NO_ADOPT_STATUS,
  EXAMINE_NO_COM_ADOPT_STATUS,
  EXAMINE_NO_AUDIT_STATUS,
  EXAMINE_ADOPT_STATUS,
  EXAMINE_NO_COM_AUDIT_STATUS,
  EXAMINE_UP_ONLINE_STATUS,
  EXAMINE_DRAFT_STATUS,
  getRedirectRoomAuditBody,
  getName 
} from '@/constant'
import getState from './state'

export default {
  name: 'examine',
  props: {
    parentVM: Object
  },
  setup(props) {
    const { headList, ...state } = getState(props.parentVM)
    const title = computed(() => {
      let item = headList.value.find(({value}) => value === state.search.value.state.auditStatus)
      return item ? item.name : ''
    })

    return { ...state, headList, title };
  },
  data() { 
    return {
      recordData: { show: false, id: 0 },
      examineMap: EXAMINE_REQ_SELECT,
      uplineStatus: EXAMINE_UP_ONLINE_STATUS,
      draftStatus: EXAMINE_DRAFT_STATUS,
      noAdoptStatus: EXAMINE_NO_ADOPT_STATUS,
      adoptStatus: EXAMINE_ADOPT_STATUS,
      noAuditStatis: EXAMINE_NO_AUDIT_STATUS,
      noComAuditStatus: EXAMINE_NO_COM_AUDIT_STATUS,
      noComAdoptStatus: EXAMINE_NO_COM_ADOPT_STATUS,
      houseType: HOUSE_TYPE_SELECT,
      shareData: { show: false, data: 0 },
      user,
    }
  },

  methods: {
    getStatusName: getName(EXAMINE_SHOW_SELECT_STATUS_TEXT),
    async shareRow(raw, type = 1) {
      if (!raw.vRUrl) {
        return this.$confirm('暂无预览链接，请先设置初始场景。', '提示')
      }

      const vrLink = process.env.VUE_APP_DOMAIN + raw.vRUrl
      const QrCode = await qrcode.toDataURL(vrLink)

      let shareItems = [{
        QrCode: QrCode,
        type: 'building',
        noRandow: true,
        houseTitle: raw.buildingUnit + raw.roomNumber,
        epcVrLink: vrLink.replace('hengda.html', 'epc.html'),
        vrLink: vrLink,
        innerVrLink: process.env.VUE_APP_INTRANET_DOMAIN + raw.vRUrl,
        status: raw.auditStatus,
      }]

      if (type === 1) {
        this.shareData.show = true
        this.shareData.data = shareItems
      } else {
        window.open(type === 1 ? shareItems[0].vrLink : shareItems[0].epcVrLink)
      }
    },
    getExamineName: getName(EXAMINE_SHOW_STATUS),
    getHouseName: getName(HOUSE_TYPE_SELECT),
    showSelectRow(data) {
      this.recordData.show = true
      this.recordData.id = data.vrId
    },
    async updateExamine() {
      if (!this.oper.state.operStatus) {
        return this.$alert('审核结果不能为空！', '提示')
      }

      const current = ~this.oper.state.operStatus 
        ? this.oper.state.auditStatus === EXAMINE_NO_AUDIT_STATUS 
          ? EXAMINE_ADOPT_STATUS
          : EXAMINE_NO_AUDIT_STATUS
        : this.oper.state.auditStatus === EXAMINE_NO_AUDIT_STATUS 
          ? EXAMINE_NO_ADOPT_STATUS
          : EXAMINE_NO_COM_ADOPT_STATUS
      
      await axios.post(secondHouseExamine, 
        getRedirectRoomAuditBody(
          this.oper.state,
          current,
          this.oper.state.maker,
          this.oper.state.roomlistingId
        )
      )

      if (current === EXAMINE_ADOPT_STATUS) {
        await axios.post(secondHouseExamine, 
          getRedirectRoomAuditBody(
            this.oper.state,
            EXAMINE_UP_ONLINE_STATUS,
            this.oper.state.maker,
          this.oper.state.roomlistingId
          )
        )
      }
      

      this.$alert('审核成功', '提示')
      
      this.oper.reset()
      this.dataList.refer()
    },

    async offlineItem(data) {
      if (data.auditStatus !== EXAMINE_ADOPT_STATUS && data.auditStatus !== EXAMINE_UP_ONLINE_STATUS) return;

      if (data.auditStatus === EXAMINE_UP_ONLINE_STATUS) {
        if (!(await this.$msgbox({
          message: '下线后VR链接将无法继续访问，确定要下线吗？', 
          title: '下线',
          showCancelButton: true,
          confirmButtonText: '下线',
          cancelButtonText: '取消',
        }))) {
          return;
        }
      }

      const status = data.auditStatus === EXAMINE_UP_ONLINE_STATUS ? EXAMINE_DRAFT_STATUS : EXAMINE_UP_ONLINE_STATUS

      await axios.post(
        secondHouseOnline,
        getRedirectRoomAuditBody(data, status, '', data.roomlistingId)
      )
      this.$alert((status === EXAMINE_UP_ONLINE_STATUS ? '上' : '下') + '线成功', '提示')
      this.dataList.refer()
    },
    preview(data) {
      let link = data.status === this.adoptStatus ? data.vrLink : data.innerVrLink

      if (link) {
        window.open(link)
      } else {
        this.$alert('当前项没有链接！', '提示')
      }
    },
    
  },
  components: {
    "com-dialog": comDialog,
    "com-record": comRecord,
    "com-share": comShare,
    "com-pagination": comPagination
  },
};
</script>

<style lang="scss" scoped>
.table-ctrl-right {
  .search-scene {
    margin: 0 20px 0 26px;
  }
  i {
    margin-left: 20px;
    font-size: 1.7rem;
    vertical-align: middle;
    cursor: pointer;

    &.active {
      color: var(--primaryColor);
    }
  }
}

.examine-from {
  width: 320px;
  margin: 0 auto;
}

.interactive {
  cursor: pointer;
}

.error {
  color: var(--primaryColor);
}

</style>