<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container>
        <zj-form-module title="评价信息">
          <zj-table :columns="evaluationColumns" :table-data="evaluationData" :table-attributes="{
            border: true
          }" />
        </zj-form-module>
      </zj-form-container>
    </zj-page-fill>
  </zj-page-container>
</template>

<script>
import { listPageV2 } from "@/api/workOrder/appraise";
import { tableDataParsing } from "@/utils/common.js"
export default {
  props: {
    id: {
      type: [String, Number],
      default: null,
    }
  },
  data() {
    return {
      evaluationData: [],
      evaluationColumns: []
    }
  },
  watch: {
    id: {
      handler(newVal, oldVal) {
        listPageV2({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.id", "compare": "=", "value": this.id }] }).then(res => {
          this.evaluationColumns = tableDataParsing(res.fieldBeans.filter(item => !~["orderFlags", "orderType"].indexOf(item.jname))).map(item => {
            if (item.columnAttributes.prop == "appraiseImgUrl") {
              item.render = (h, { row, index, column }) => {
                return (
                  <div style="padding:0 6px;cursor: pointer;">
                    {row.appraiseImgUrl ? row.appraiseImgUrl.split(",").map(url => <el-image src={url} preview-src-list={[url]} fit="fit" style="width:80px;height:80px;" />) : null}
                  </div>
                )
              }
            }
            return item
          })
          this.$nextTick(() => {
            this.evaluationData = res.data.records.map(item => {
              Object.keys(item).map(key => {
                var val = JSON.parse(res?.fieldBeans?.find(val => val.jname == key)?.enumMap || "{}")[item[key]];
                if (val) item[key] = val;
              })
              return item
            })
          })
        })
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep &>.zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    &>div:nth-child(1) {
      margin-top: 20px;
    }
  }
}
</style>
