<template>
  <div>
    <Modal title="租赁台账" footer-hide :width="64" v-model="isShow">
      <Button
        type="primary"
        style="margin-bottom: 10px"
        @click="
          $refs['addLease'].setRow(row),
            $refs['addLease'].setType('add'),
            $refs['addLease'].show()
        "
      >新增记录</Button
      >
      <xy-table
        :btn-width="120"
        style="width: 100%"
        :auths="['delete', 'edit']"
        :height="360"
        :is-page="false"
        ref="xyTable"
        :list="list"
        :table-item="table"
        @delete="destroy"
        @editor="
          (row1) => {
            $refs['addLease'].setId(row1.id),
             $refs['addLease'].setType('editor');
            $refs['addLease'].setRow(row);
            $refs['addLease'].show();
          }
        "
      ></xy-table>
    </Modal>

    <addLease ref="addLease" @refresh="getList"></addLease>
  </div>
</template>

<script>
import { index, destroy } from "@/api/system/baseForm";

import addLease from "@/views/assets/component/addLease.vue";
export default {
  components: {
    addLease,
  },
  data() {
    return {
      id: "",
      isShow: false,
      row: {},

      list: [],
      table: [
        {
          prop: 'leixing',
          label: '类型',
          width: 80,
          formatter:(data, row, value) => {
            let map = new Map([
              [1,'土地'],
              [2,'房产']
            ])
            return map.get(value)
          }
        },
        {
          label: '承租方',
          prop: 'chengzufang',
        },
        {
          label: '租赁面积',
          prop: 'zulinmianji'
        },
        {
          label: '租赁期限起止',
          width: 200,
          customFn:row => {
            return (
              <div>
                <span>{ this.$moment(new Date(row.zulinkaishiqixian)).format('YYYY.MM.DD') }</span>
                <span> - </span>
                <span>{ this.$moment(new Date(row.zulinjieshuqixian)).format('YYYY.MM.DD') }</span>
              </div>
            )
          }
        },
        {
          label: '用途',
          prop: 'yongtu',
          width: 160
        },
        // {
        //   label: "附件",
        //   prop: 'file',
        //   minWidth: 180,
        //   customFn:row => {
        //     return (
        //       <div>
        //         {
        //           row.file.map(i => (<a class="original-name-a" on={{click:()=>(window.open(i.url))}}>{i.original_name}</a>))
        //         }
        //       </div>
        //     )
        //   }
        // }
      ],
    };
  },
  methods: {
    setRow(row) {
      this.row = row;
    },
    show() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    },
    setId(id) {
      if (typeof id === "number") {
        this.id = id;
        this.select.filter[0].value = id;
      }
    },
    async destroy (row) {
      await destroy({
        id: row.id,
        table_name: 'leases'
      })
      await this.getList()
    },

    async getList () {
      const res = await index({
        table_name: 'leases',
        page: 1,
        page_size: 9999,
        filter: [
          {
            key: /\/land/g.test(this.$route.path) ? 'land_id' : 'house_id',
            op: 'eq',
            value: this.row.id
          }
        ]
      })
      this.list = res.data;
    },
  },
  computed: {},
  watch: {
    isShow(newVal) {
      if (newVal) {
        this.getList();
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>
