<template>
  <div>
    <div class="paddings">
      <el-card shadow="hover" class="layout-padding-auto">
        <el-page-header style="margin-bottom: 10px" @back="goBack">
          <template #extra>
            <div class="flex items-center">
              <el-dropdown>
                <el-button type="primary" size="default" style="margin-right: 10px;">
                  下载Excel
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="download(0)">手动上传</el-dropdown-item>
                    <el-dropdown-item @click="download(1)">系统生成</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-button type="danger" size="default" @click="removeshow">一键退回</el-button>
            </div>
          </template>
        </el-page-header>
        <div class="uscon">
          <el-tabs v-model="actname" type="card" class="demo-tabs">
            <el-tab-pane label="附表一" name="0">
              <tableone :uitem="state.uitem"></tableone>
            </el-tab-pane>
            <el-tab-pane label="附表二" name="1">
              <tabletwo :uitem="state.uitem"></tabletwo>
            </el-tab-pane>
            <el-tab-pane label="附表三" name="2">
              <tablethree :uitem="state.uitem"></tablethree>
            </el-tab-pane>
            <el-tab-pane label="附表四" name="3">
              <tablefour :uitem="state.uitem"></tablefour>
            </el-tab-pane>
            <el-tab-pane label="附表五" name="4">
              <tablefive :uitem="state.uitem"></tablefive>
            </el-tab-pane>
            <el-tab-pane label="附表六" name="5">
              <tablesix :uitem="state.uitem"></tablesix>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </div>
    <div class="ors">
      <div class="orstitle">
        <SvgIcon name="ele-Notification" class="font15 color" />
        <p>表间校验规则</p>
      </div>
      <div class="orsitem">1、  表3，4的批准预（销）售面积合计=表1批准预（销）售商品住房面积</div>
      <div class="orsitem">2、  表3，4的月末累计可售面积合计=表1月末累计可售商品住房面积</div>
      <div class="orsitem">3、  表3，4的登记销售面积合计=表1实际登记销售面积商品住房面积=表5本市+外地面积</div>
      <div class="orsitem">4、  表3，4的合计平均价格=表1平均销售价格商品住房平均价</div>
      <div class="orsitem">5、  表3所有合计项的值=表4所有合计项的值</div>
      <div class="orsitem">6、  表3的面积/套数应在对应的区间内。</div>
      <div class="orsitem">7、  表4的平均价格应在对应的区间内。</div>
      <div class="orsitem">8、  表5本市+外地套数=表3，4的登记销售套数合计</div>
      <div class="orsitem">9、  表5本市面积╳平均价格+外地面积╳平均价格=表1实际登记销售商品住房面积╳商品住房平均价格。</div>
      <div class="orsitem">10、商品房>=商品住宅，二手房>=二手住房</div>
      <div class="orsitem">11、本月累计值>=上月累计值</div>
    </div>

    <div class="ors">
      <div class="orstitle">
        <SvgIcon name="ele-Notification" class="font15 color" />
        <p>计算公式</p>
      </div>
      <div class="orsitem">同比：（今年同期-去年同期）/去年同期╳100或（今年同期/去年同期）-1</div>
      <div class="orsitem">占比：区间值/合计值╳100</div>
    </div>
    <el-dialog v-model="state.show" title="退回" width="400px">
      <el-input v-model="state.form.remark" :rows="5" type="textarea" placeholder="请输入退回理由" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.show = false">取消</el-button>
          <el-button type="primary" @click="examine">确认退回</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="constructDetail">
import { reactive, ref, defineAsyncComponent, onMounted } from "vue";

import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import { getCons } from "/@/api/report/provinces";
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';

import mittBus from "/@/utils/mitt";
// 表一
const tableone = defineAsyncComponent(
  () => import("/@/views/report/provinces/components/tableone.vue")
);
// 表二
const tabletwo = defineAsyncComponent(
  () => import("/@/views/report/provinces/components/tabletwo.vue")
);
// 表三
const tablethree = defineAsyncComponent(
  () => import("/@/views/report/provinces/components/tablethree.vue")
);
// 表四
const tablefour = defineAsyncComponent(
  () => import("/@/views/report/provinces/components/tablefour.vue")
);
// 表五
const tablefive = defineAsyncComponent(
  () => import("/@/views/report/provinces/components/tablefive.vue")
);

// 表六
const tablesix = defineAsyncComponent(
  () => import("/@/views/report/provinces/components/tablesix.vue")
);

const actname = ref("0");
const goBack = () => {
  router.go(-1);
  mittBus.emit(
    "onCurrentContextmenuClick",
    Object.assign({}, { contextMenuClickId: 1, ...route })
  );
};

// 弹出框退回
const removeshow = (id: any) => {
  state.form.id = state.uid;
  state.show = true;
}

const download = async (row: any) => {
  let type = 0,
    title = '',
    id = '',
    areaCode = ''
  if (row == 0) {
    type = 2;
    id = state.uid
    areaCode = state.uitem.areaCode
    title = `${state.uitem.date}${state.uitem.areaName}省厅月报需要上报市交易中心的表(手动上传).xlsx`
  }
  else {
    type = 1
    id = state.uid
    areaCode = state.uitem.areaCode
    title = `${state.uitem.date}${state.uitem.areaName}省厅月报需要上报市交易中心的表(系统生成).xlsx`
  }
  // 下载excel
  let item = await getCons().downloadUrl(id, type, areaCode);
  let downloadstate = await getCons().downloadstate(item)
  if (downloadstate.code == 500) return ElMessage.error(downloadstate.msg)
  let download: any = await getCons().download(item);
  let blob = new Blob([download], { type: "application/octet-stream;" });
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = title;
  document.body.appendChild(link);
  link.click();
};

const examine = async () => {
  let sfrom = state.form;
  if (sfrom.id == '') return ElMessage.error('暂未找到id')
  if (sfrom.remark == '') return ElMessage.error('请输入理由')
  ElMessageBox.confirm(
    '您确认要退回手动上传的数据吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      let item = await getCons().examineup(state.form)
      if (item.code == 500) return ElMessage.error(item.msg)
      ElMessage.success(item.msg)
      getTableData();
      state.show = false;
      state.form = { id: '', remark: '' }
    })
    .catch(() => {
    })
}

// 定义变量内容
const state = reactive<any>({
  uid: "",
  uitem: {},
  show: false,
  form: { id: '', remark: '' }
});
const getTableData = async () => {
  const data = await getCons().getdetail(state.uid);
  state.uitem = data.data;
};
onMounted(() => {
  let query = route.query;
  if (!query.id) return router.go(-1);
  state.uid = query.id;
  getTableData();
});
</script>
<style lang="scss">
.paddings {
  padding: 20px;
}

.uscon {
  height: 100%;
}

.errornone {
  height: 300px;
}

.paddings {
  padding: 20px;
}

.uscon {
  height: 100%;
  position: relative;
}

.usconbtn {
  position: absolute;
  right: 10px;
  z-index: 888;
  top: 4px;
}

.redbg {
  background-color: #ffaba0;
}

.ctitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}

.title {
  font-weight: bold;
  font-size: 14px;
  border-left: 3px solid #409efe;
  padding-left: 10px;
  margin-bottom: 20px;
}

.ustitles {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 10px;
}


.ors {
  display: flex;
  flex-direction: column;
  background-color: #ecf2fe;
  padding: 20px;
  margin-bottom: 10px;
  margin: 10px;

  .orsitem {
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-bottom: 5px;

    b {
      flex: 0 0 5%;
      color: #001330;
    }
  }
}

.orstitle {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #333;
  font-size: 15px;
  margin-bottom: 10px;

  .color {
    color: #2362e1;
    margin-right: 4px;
  }
}

.table {
  width: 100%;
  border-collapse: collapse;

  tr {
    td {
      border: 1px solid #c0c0c0;
      padding: 10px;
      text-align: center;
    }
  }
}

.utable {
  width: 100%;
  background-color: #fff;
}

.utabletitle {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
}

.utabletop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  padding-right: 20px;
  padding-bottom: 20px;
}
</style>
