<template>
  <div class="main">
    <div>
      <el-form ref="form" :inline="true" label-width="100px">
        <el-form-item label="需求类型">
          <el-select v-model="listQuery.type" placeholder="请选择需求类型">
            <el-option label="全部" :value="''"></el-option>
            <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-form-item label="需求状态">
          <el-select
            v-model="listQuery.auditStatus"
            placeholder="请选择需求状态"
          >
            <el-option label="全部" :value="''"></el-option>
            <el-option label="待处理" :value="1"></el-option>
            <el-option label="已生成订单" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-button type="primary" @click="search" plain icon="el-icon-search"
          >搜索</el-button
        >
        <el-button type="primary" plain @click="clear">清除搜索</el-button>
      </el-form>
      <div class="orderItem" v-for="(item, idx) in tableData" :key="idx">
        <div class="itemTop">提交时间：{{ item.crtTimeStr }}</div>
        <div class="itemContent">
          <div class="itemLeft">
            <div class="itemInfo">
              <div>
                <p>
                  区域范围：{{
                    item.provinceName + item.cityName + item.areaName
                  }}
                </p>
                <p>采禁时间：{{ item.startTimeStr }}至{{ item.endTimeStr }}</p>
                <p v-if="item.type == 1">分辨率：{{ item.resolution }}</p>
              </div>
              <div v-if="item.type != 3">
                <p v-if="item.type != 3">
                  获取类型：
                  <span v-if="item.gainType == 101">数据API</span>
                  <span v-if="item.gainType == 102">实体数据</span>
                  <span v-if="item.gainType == 201">报告</span>
                  <span v-if="item.gainType == 202">web平台</span>
                  <span v-if="item.gainType == 203">其他</span>
                </p>
                <p v-if="item.type == 2">申请人：{{ item.contactUser }}</p>
                <p v-if="item.type == 2">联系方式：{{ item.contactPhone }}</p>
              </div>
              <div v-if="item.type == 3">
                <p>定制类型：{{ item.dataType }}</p>
                <p>数据格式：{{ item.dataFormat }}</p>
              </div>
            </div>
            <div class="itemDesc" v-if="item.type != 3">
              <span>需求描述：</span>
              <span>{{ item.descr }}</span>
            </div>
          </div>
          <div class="itemMiddle" v-if="item.auditStatus == 1">待处理</div>
          <div class="itemMiddle" v-if="item.auditStatus == 2">已生成订单</div>
          <div class="itemMiddle" v-if="item.auditStatus == 3">已拒绝</div>
          <div
            class="itemRight"
            v-if="item.auditStatus == 1"
            @click="checkInfo(item)"
          >
            审核
          </div>
          <div
            class="itemRight"
            v-if="item.auditStatus == 2"
            @click="toItemOrder(item)"
          >
            查看订单
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      style="text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.page"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      title="定制数据审核"
      :visible.sync="showCheckInfo"
      width="30%"
      @close="showCheckInfo = false"
    >
      <div class="orderItem">
        <div class="itemTop">提交时间：{{ checkItem.crtTimeStr }}</div>
        <div class="itemContent2">
          <div class="itemLeft">
            <div class="itemInfo2">
              <div>
                <p>
                  区域范围：{{
                    checkItem.provinceName +
                    checkItem.cityName +
                    checkItem.areaName
                  }}
                </p>
                <p>
                  采禁时间：{{ checkItem.startTimeStr }}至{{
                    checkItem.endTimeStr
                  }}
                </p>
                <p v-if="checkItem.type == 1">
                  分辨率：{{ checkItem.resolution }}
                </p>
              </div>
              <div v-if="checkItem.type != 3">
                <p v-if="checkItem.type != 3">
                  获取类型：
                  <span v-if="checkItem.gainType == 101">数据API</span>
                  <span v-if="checkItem.gainType == 102">实体数据</span>
                  <span v-if="checkItem.gainType == 201">报告</span>
                  <span v-if="checkItem.gainType == 202">web平台</span>
                  <span v-if="checkItem.gainType == 203">其他</span>
                </p>
                <p v-if="checkItem.type == 2">
                  申请人：{{ checkItem.contactUser }}
                </p>
                <p v-if="checkItem.type == 2">
                  联系方式：{{ checkItem.contactPhone }}
                </p>
              </div>
              <div v-if="checkItem.type == 3">
                <p>定制类型：{{ checkItem.dataType }}</p>
                <p>数据格式：{{ checkItem.dataFormat }}</p>
              </div>
            </div>
            <div class="itemDesc" v-if="checkItem.type != 3">
              <span>需求描述：</span>
              <span>{{ checkItem.descr }}</span>
            </div>
            <div class="itemDesc">
              <p>
                审核结果：<el-radio-group v-model="isPass">
                  <el-radio :label="2">通过</el-radio>
                  <el-radio :label="3">不通过</el-radio>
                </el-radio-group>
              </p>
              <p v-if="isPass == 2">
                数据价格：
                <el-input-number
                  v-model="price"
                  :min="0"
                  :step="0.1"
                  :precision="2"
                  style="width: 50%"
                ></el-input-number>
              </p>
              <p v-if="isPass == 3">
                拒绝原因：
                <el-input v-model="reason" style="width: 50%"></el-input>
              </p>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showCheckInfo = false">取 消</el-button>
        <el-button type="primary" @click="CreateOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getCustomList, createOrder } from "api/website/order/index";
import { timestamp2DateAuto } from "../../../utils/dateUtils";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      isPass: 2,
      checkItem: {},
      listQuery: {
        page: 1,
        limit: 5,
        type: "",
        status: "",
      },
      price: 0,
      reason: "",
      showCheckInfo: false,
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    checkInfo(item) {
      this.checkItem = item;
      this.showCheckInfo = true;
      console.log(item);
    },
    CreateOrder() {
      let item = this.checkItem;
      let text = "";
      if (this.isPass == 2) {
        text = "确认通过？";
      } else {
        text = "确认拒绝？";
      }
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          createOrder({
            customId: item.id,
            auditStatus: this.isPass,
            auditReason: this.reason,
            amount: this.price,
          }).then((res) => {
            if (res.status == 200) {
              this.$message.success("操作成功");
              this.showCheckInfo = false;
              this.getList();
            } else {
              this.$message.warning(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    toItemOrder(item) {
      this.$router.push({
        path: "/orderManagement/orderList",
        query: { orderNo: item.orderNo },
      });
    },
    delItemOrder(item) {
      this.$confirm("确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return;
          createOrder({
            customId: item.id,
            auditStatus: this.isPass,
            auditReason: this.reason,
            amount: this.price,
          }).then((res) => {
            if (res.status == 200) {
              this.$message.success("操作成功");
              this.showCheckInfo = false;
              this.getList();
            } else {
              this.$message.warning(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    search() {
      this.getList();
    },
    clear() {
      this.listQuery = {
        page: 1,
        limit: 10,
        type: "",
        auditStatus: "",
      };
      this.getList();
    },
    getList() {
      getCustomList(this.listQuery).then((res) => {
        if (res.status == 200) {
          this.tableData = res.data.data;
          this.total = res.data.totalCount;
          this.tableData.map((item) => {
            item.crtTimeStr = timestamp2DateAuto(
              item.crtTime,
              "yyyy-MM-dd hh:mm:ss"
            );
            item.startTimeStr = timestamp2DateAuto(
              item.startTime,
              "yyyy-MM-dd"
            );
            item.endTimeStr = timestamp2DateAuto(item.endTime, "yyyy-MM-dd");
          });
        }
      });
    },
    handleSizeChange(val) {
      this.listQuery.page = 1;
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  box-sizing: border-box;
  padding: 20px;
}
.orderItem {
  margin-bottom: 10px;
  width: 100%;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
}
.itemTop {
  width: 1005;
  height: 40px;
  background: #f5f6fa;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: left;
  padding-left: 16px;
  color: #43425d;
  border-bottom: 1px solid #e6e6e6;
}
.itemContent {
  width: 100%;
  display: flex;
  align-items: center;
  height: 140px;
}
.itemContent2 {
  width: 100%;
  display: flex;
  align-items: center;
}
.itemContent > div {
  height: 100%;
}
.itemLeft {
  flex: 1;
  box-sizing: border-box;
  padding: 16px;
  .itemInfo2 {
    display: flex;
    width: 100%;
    height: 90%;
    flex-direction: column;
  }
  .itemInfo {
    display: flex;
    width: 100%;
    height: 90%;
    align-items: center;
    div {
      width: 50%;
      font-size: 13px;
      height: 100%;

      color: #333333;
      p {
        margin-bottom: 12px;
      }
    }
  }
  .itemDesc {
    font-size: 13px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: left;
    color: #333333;
  }
}
.itemMiddle {
  width: 120px;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  color: #e4c817;
}
.itemRight {
  font-size: 11px;
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
</style>
