<template>
  <el-dialog
    :title="'进行选择下单'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    :before-close="handleClose"
  >
    <el-form
      :model="dataForm"
      ref="dataForm"
      label-width="80px"
      :rules="dataRule"
    >
      <el-row>
        <el-col>
          <el-form-item label="预定日期" prop="date">
            <el-date-picker
              v-model="dataForm.date"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-button type="primary" @click="getData()">查询</el-button>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="dataForm.name" placeholder="入住人姓名（写一个即可）"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="房数" prop="roomNum">
            <el-input v-model="dataForm.roomNum" placeholder="入住房间数"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="人数" prop="perNum">
            <el-input v-model="dataForm.perNum" placeholder="入住人数"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="总价" prop="payPrice">
            <el-input v-model="dataForm.payPrice" placeholder="总价"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="电话" prop="phone">
            <el-input v-model="dataForm.phone" placeholder="电话"></el-input>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

    <el-table :data="dataList" style="width: 100%">
      <el-table-column prop="typeRoomName" header-align="left" label="房型名称"> </el-table-column>
      <el-table-column prop="saleRoomName" label="rp名称"> </el-table-column>
      <el-table-column prop="price" label="总价"> </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="hotelinfo-table-expand">
            <el-form-item label="房型编码">
              <span>{{ props.row.typeRoomCode }}</span>
            </el-form-item>
            <el-form-item label="rp编码">
              <span>{{ props.row.saleRoomId }}</span>
            </el-form-item>
            <el-form-item label="对应日期">
              <span>{{ props.row.date }}</span>
            </el-form-item>
            <el-form-item label="对应库存">
              <span>{{ props.row.count }}</span>
            </el-form-item>
            <el-form-item label="退改政策">
              <span>{{ props.row.cancelPolicy }}</span>
            </el-form-item>
            <el-form-item label="最小预定">
              <span>{{ props.row.minCount }}</span>
            </el-form-item>
            <el-form-item label="最小连住">
              <span>{{ props.row.minDay }}</span>
            </el-form-item>
            <el-form-item label="最晚预定">
              <span>{{ props.row.minTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column align="center">
        <template slot-scope="scope">
          <el-button size="small" @click="handleRecive(scope.$index, scope.row)"
            >下单</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        date: "",
        name: "",
        roomNum: null,
        perNum: null,
        payPrice: null,
        phone: ""
      },
      dataList: [],
      dataRule: {
          name: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          roomNum: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          perNum: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          payPrice: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ]
        }
    }
  },

  methods: {
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
    },
    // 关闭弹窗
    handleClose(done) {
      done()
      this.dataList = []
      this.dataForm.id = 0
      this.dataForm.date = ""
      this.dataForm.name = ""
      this.dataForm.roomNum = null
      this.dataForm.perNum = null
      this.dataForm.payPrice = null
      this.dataForm.phone = null
    },
    // 取消操作
    cancel() {
      this.visible = false
      this.dataList = []
      this.dataForm.id = 0
      this.dataForm.date = ""
    },
    // 获取可预订房型
    getData() {
      let dateStart = null
      let dateEnd = null
      if (this.dataForm.date !== null) {
        (dateStart = this.dataForm.date[0]), (dateEnd = this.dataForm.date[1]);
      }
      this.$http({
        url: this.$http.adornUrl("/ctrip/get_data"),
        method: "get",
        params: this.$http.adornParams({
          hotelCode: this.dataForm.id,
          startDate: dateStart,
          endDate: dateEnd
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.htl
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 下单
    handleRecive(index, row) {
      this.$confirm(`确定下单操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/ctrip/buy"),
            method: "get",
            params: this.$http.adornParams({
              hotelCode: this.dataForm.id,
              roomCode: row.typeRoomCode,
              rateplanCode: row.saleRoomId,
              price: this.dataForm.payPrice,
              roomNum: this.dataForm.roomNum,
              perNum: this.dataForm.perNum,
              phone: this.dataForm.phone,
              startDate: this.dataForm.date[0],
              endDate: this.dataForm.date[1],
              name: this.dataForm.name
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1000
              })
            } else {
              this.$message.error(data.msg)
            }
            this.visible = false
            this.dataList = []
            this.dataForm.date = ""
            this.dataForm.name = ""
            this.dataForm.roomNum = null
            this.dataForm.perNum = null
            this.dataForm.payPrice = null
            this.dataForm.phone = null
          })
        })
        .catch(() => {
          console.log("取消操作")
        })
    }

    // 表单提交
    // dataFormSubmit() {
    //   this.$refs["dataForm"].validate((valid) => {
    //     if (valid) {
    //       this.$http({
    //         url: this.$http.adornUrl(
    //           `/ht/hthotelinfo/${!this.dataForm.id ? "save" : "update"}`
    //         ),
    //         method: "post",
    //         data: this.$http.adornData({
    //           // 数据
    //         }),
    //       }).then(({ data }) => {
    //         if (data && data.code === 0) {
    //           this.$message({
    //             message: "操作成功",
    //             type: "success",
    //             duration: 1500,
    //             onClose: () => {
    //               this.visible = false;
    //               this.$emit("refreshDataList");
    //             },
    //           });
    //         } else {
    //           this.$message.error(data.msg);
    //         }
    //       });
    //     }
    //   });
    // },
  }
}
</script>

<style>
.hotelinfo-table-expand {
  font-size: 0;
}
.hotelinfo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.hotelinfo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
