<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">
          <span class="title"><span style="color: red;padding-right: 10px;">*</span>流失原因</span>
          <el-input v-model="detail.liushiyuanyin" type="textarea" :autosize="{ minRows: 2 }"></el-input>

          <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>
  </div>
</template>

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

      detail: {},
    };
  },
  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;
    },

    confirm () {
      if (!this.detail.liushiyuanyin) {
        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 = 3;
      console.log(copyForm)
      save(Object.assign(copyForm,{ table_name: this.tableName })).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
      this.$emit('refresh')
      this.hidden()
    }
  },
  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) => {
          console.log(111, res);
          this.detail = res;
        });
      }
    },
  },
  mounted() {},
};
</script>

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

}

.form {
  padding: 20px 10px;

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