<template>
  <div>
    <el-drawer
      ref="elDrawer"
      :title="detail.name || '成交'"
      :visible.sync="isShow"
      size="45%"
      direction="rtl"
    >
      <template>
        <el-descriptions
          size="medium"
          direction="vertical"
          :column="3"
          :labelStyle="{ 'font-weight': '600', width: '33%' }"
          :content-style="{ width: '33%' }"
          border
          style="margin: 20px 10px"
        >
          <template v-for="info in columns">
            <el-descriptions-item :label="info.name">
              <template v-if="info.edit_input === 'richtext'">
                <div v-html="detail[info.field]"></div>
              </template>
              <template v-else>
                {{ contentFormat(info) }}
              </template>
            </el-descriptions-item>
          </template>
        </el-descriptions>

        <div class="form">
          <div  style="display: flex;align-items: center;">
            <span class="title"
            ><span style="color: red; padding-right: 10px">*</span
            >确认日期</span
            >
            <el-date-picker
              style="margin-left: 20px;flex: 1;"
              v-model="detail.querenriqi"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              clearable
            ></el-date-picker>
          </div>
          <div style="margin-top: 20px;display: flex;align-items: center;">
            <span class="title"
            ><span style="color: red; padding-right: 10px">*</span
            >确认场馆</span
            >
            <el-input readonly style="margin-left: 20px;flex: 1;" :value="pickVenueDetail ? pickVenueDetail.name : ''" @focus="$refs['venuePick'].show();"></el-input>
          </div>

          <div class="btns">
            <el-button type="primary" size="small" @click="confirm"
              >确认</el-button
            >
            <el-button size="small" @click="hidden">取消</el-button>
          </div>
        </div>
      </template>
    </el-drawer>

    <venuePick ref="venuePick" @venueDetailPick="venueDetailPick"></venuePick>
  </div>
</template>

<script>
import venuePick from "@/views/orders/components/venuePick.vue";
import { show, save } from "@/api/system/baseForm";
import { deepCopy } from "@/utils";
export default {
  components: {
    venuePick
  },
  props: {
    formInfo: {
      type: Array,
      default: () => [],
    },
    tableName: String,
  },
  data() {
    return {
      id: "",
      isShow: false,

      detail: {},
      pickVenueDetail: {},
    };
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
    setId(id) {
      if (typeof id == "number") {
        this.id = id;
      } else {
        console.error("error typeof id: " + typeof id);
      }
    },
    getId() {
      return this.id;
    },

    venueDetailPick (node) {
      this.pickVenueDetail = node;
      this.detail.venue_detail_confirm_id = node.id;
    },
    confirm() {
      if (!this.detail.querenriqi) {
        this.$message({
          type: "warning",
          message: "请填写确认日期",
        });
        return;
      }
      if (!this.detail.venue_detail_confirm_id) {
        this.$message({
          type: "warning",
          message: "请选择确认场馆",
        });
        return;
      }
      let copyForm = deepCopy(this.detail);
      for (const key in copyForm) {
        if (key.includes("_relation")) {
          delete copyForm[key];
        }
      }
      copyForm.zhuangtai = 2;
      if (copyForm.venue_detail_confirm_id !== copyForm.venue_detail_id) {
        this.$confirm('当前确认场馆与预约场馆不同, 是否确认?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          save(Object.assign(copyForm, { table_name: this.tableName })).then(
            (res) => {
              this.$message({
                type: "success",
                message: "操作成功",
              });
            }
          );
          this.$emit("refresh");
          this.hidden();
        }).catch(() => {
        });
      }
    },
  },
  computed: {
    columns() {
      return this.formInfo.filter((i) => {
        return (
          i.list_show && i.field !== "liushiyuanyin" && i.field !== "querenriqi"
        );
      });
    },
    contentFormat() {
      return function (i) {
        if (i.parameter_id) {
          return this.detail[i.link_with_name]?.value;
        }
        if (i.link_table_name) {
          if (i.link_relation === "hasOne") {
            return (
              this.detail[i.link_with_name]?.name ||
              this.detail[i.link_with_name]?.no ||
              this.detail[i.link_with_name]?.value
            );
          }
          if (i.link_relation === "hasMany") {
            return this.detail[i.link_with_name]
              ?.map((o) => o?.name || o?.no || o?.value)
              ?.toString();
          }
        }

        return this.detail[i.field];
      };
    },
  },
  watch: {
    isShow(newVal) {
      if (newVal) {
        show(
          {
            table_name: this.tableName,
            id: this.id,
          },
          true
        ).then((res) => {
          this.detail = res;
          this.detail['querenriqi'] ? '' : (this.detail['querenriqi'] = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss'));
          this.detail.venue_detail_confirm_id = this.detail.venue_detail_id;
          this.pickVenueDetail = this.detail.venue_detail_id_venue_details_id_relation;
        });
      }
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.btns {
  text-align: center;
  margin-top: 20px;
}

.form {
  padding: 20px 10px;

  .title {
    font-weight: 600;
    color: #333333;
  }
}
</style>
