
<template>
    <div class="page">
        <LayoutTable :data='tableData' :config='tableConfig' notAdd notDel />
    </div>
</template>

<script>
import table from "@/assets/mixins/table";

export default {
    mixins: [table],
    data() {
        return {
            config: {
                search: [
                    {
                        name: "assetNum",
                        type: "text",
                        label: "资产码",
                        fuzzy: true,
                    },
                    {
                        name: "eventCode",
                        type: "select",
                        label: "事件",
                    },

                    {
                        name: "beforeStatus",
                        type: "select",
                        label: "事件前状态",
                    },
                    {
                        name: "afteStatus",
                        type: "select",
                        label: "事件后状态",
                    },
                    {
                        name: "eventTimeStart",
                        type: "date",
                        label: "事件发生时间开始",
                    },
                    {
                        name: "eventTimeEnd",
                        type: "date",
                        label: "事件发生时间结束",
                    },
                    {
                        name: "eventUser",
                        type: "userLoginNameRemoteSelect",
                        label: "事件经手人",
                      placeholder: "请输入查询经手人"
                    },
                    {
                        name: "eventAfterUser",
                        type: "userLoginNameRemoteSelect",
                        label: "事件关联人",
                      placeholder: "请输入查询关联人"
                    },
                    {
                        name: "eventAddress",
                        type: "text",
                        label: "事件发生地",
                        fuzzy: true,
                    },
                ],
                columns: [
                    {
                        prop: "id",
                        label: "ID",
                        width: 60,
                    },
                    {
                        prop: "assetNum",
                        label: "资产码",
                        width: 160,
                    },
                    {
                        prop: "eventCode",
                        label: "事件名称",
                        formatter: this.formatter,
                    },
                    {
                        prop: "beforeStatus",
                        label: "事件前状态",
                        formatter: this.formatter,
                    },
                    {
                        prop: "afteStatus",
                        label: "事件后状态",
                        formatter: this.formatter,
                    },
                    {
                        prop: "eventUser",
                        label: "事件经手人",
                        formatter: this.formatter,
                    },
                    {
                        prop: "eventAfterUser",
                        label: "事件关联人",
                        formatter: this.formatterEventAfterUser,
                    },
                    {
                        prop: "eventAddress",
                        label: "事件发生地点",
                    },
                  {
                    prop: "eventImgUrl",
                    label: "事件图片",
                    width: 140,
                    formatter: this.formatterImgShow,
                  },
                  {
                    prop: "remark",
                    label: "备注",
                  },
                    {
                        prop: "eventExtInfo",
                        label: "扩展信息(临时显示)",
                    },
                    {
                        prop: "eventTime",
                        label: "事件发生时间",
                        width: 140,
                        formatter: this.formatterDate,
                    },
                    {
                        prop: "createTime",
                        label: "创建时间",
                        width: 140,
                        formatter: this.formatterDate,
                    },
                    {
                        label: "操作",
                        width: 60,
                        formatter: (row) => {
                            return (
                                <table-buttons
                                    row={row}
                                    onView={this.toView}
                                    noDel
                                    noEdit
                                />
                            );
                        },
                    },
                ],
            },
        };
    },
    methods:{
      formatterImgShow(row, column, val) {
        let previewEventUrl = [];
        if(row.eventImgUrl && row.eventImgUrl.length > 0 && row.eventImgUrl !=='无'){
          previewEventUrl = row.eventImgUrl.split(",");
          let html2 = <div class="demo-image__preview">
            <el-image style="width: 70px; height: 70px"
                      src={previewEventUrl[0]}
                      preview-src-list={previewEventUrl}>
            </el-image>
          </div>
          return html2;
        }else{
          return '无';
        }
      },

      formatterEventAfterUser(row, column, val) {
        const tagsMap = {
          0: "danger",
          1: "success",
        };
        let content = "";
        if (
            this.tableData.dict &&
            this.tableData.dict["eventAfterUser"]
        ) {
          const dict = this.tableData.dict["eventAfterUser"];
          let value = val + "";
          if (value.split(",").length > 1) {
            let result = [];
            for (let v of value.split(",")) {
              let tag = (
                  <span>
                                {" "}
                    <el-tag
                        type={tagsMap[val] || "info"}
                        size="mini"
                    >
                                    {dict[v] || v}
                                </el-tag>
                            </span>
              );
              result.push(tag);
            }
            return result;
          } else {
            content = dict[val] || val;
            return (
                <el-tag type={tagsMap[val] || "info"} size="mini">
                  {content}
                </el-tag>
            );
          }
        }
      },
    }
};
</script>
