import { getWebsit } from "@/api/customerManagement.js"
import { memberListPageV2 } from "@/api/masterManagement";
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { listPageV2 } from "@/api/workOrder/orderType";
import ImageUpload from '@/components/file-upload'
export default {
  data() {
    return {
      websitList: [],
      workerList: [],
      orderSmallTypeData: []
    }
  },
  computed: {
    workersColumns() {
      return [
        {
          columnAttributes: {
            label: '姓名',
            prop: 'workerId'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px" prop={`punishOrderWorkers.${index}.${column.columnAttributes.prop}`} rules={required}>
                <zj-select
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  onChange={(val) => {
                    if (val) {
                      var data = this.workerList.find(item => item.value == val)
                      row.workerMobile = data?.data?.workerMobile || ""
                      row.workerName = data?.label || val
                    } else {
                      row.workerName = ""
                      row.workerMobile = ""
                    }
                    this.$nextTick(() => {
                      this.itemjiaoyanqita(index)
                    })
                  }}
                  placeholder="请选择"
                  blurNoMatchText={true}
                  disabled={this.formData.status == "OK"}
                  clearable={true}
                  filterable={true}
                  blurNoMatchInputBorderColor="">
                  {this.workerList.map((item, index_) => <zj-option key={index_} label={item.label} value={item.value}></zj-option>)}
                </zj-select>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '联系电话',
            prop: 'workerMobile'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px" prop={`punishOrderWorkers.${index}.${column.columnAttributes.prop}`} rules={mobileRequired}>
                <el-input
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => {
                    row[column.columnAttributes.prop] = val
                    this.$nextTick(() => {
                      this.itemjiaoyanqita(index)
                    })
                  }}
                  placeholder="请输入内容"
                  disabled={this.formData.status == "OK"}
                >
                </el-input>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '处罚金额',
            prop: 'amount'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px" prop={`punishOrderWorkers.${index}.${column.columnAttributes.prop}`} rules={required}>
                <el-input
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => {
                    row[column.columnAttributes.prop] = val
                    this.$nextTick(() => {
                      this.itemjiaoyanqita(index)
                    })
                  }}
                  placeholder="请输入内容"
                  disabled={this.formData.status == "OK"}
                  type="number"
                >
                </el-input>
              </el-form-item>
            </div>
          }
        },
        ...(() => {
          if (this.formData.status != "OK") {
            return [
              {
                columnAttributes: {
                  label: '操作',
                  width: 100
                },
                render: (h, { row, column, index }) => {
                  return <div style="padding-left:10px">
                    <el-button type="text" onClick={() => {
                      this.formData.punishOrderWorkers.splice(index, 1)
                    }}>删除</el-button>
                  </div>
                }
              },
            ]
          }
          return []
        })()
      ]
    },
    pandanxinxi() {
      return [
        {
          name: 'el-input',
          md: 6,
          attributes: {
            placeholder: '请输入',
            disabled: this.formData.status == "OK"
          },
          formItemAttributes: {
            label: '处罚工单号',
            prop: 'orderBaseId',
            rules: [...required],
          }
        },
        {
          name: 'el-select',
          md: 6,
          options: this.orderSmallTypeData,
          attributes: {
            placeholder: '请选择',
            clearable: true,
            filterable: true,
            disabled: this.formData.status == "OK"
          },
          formItemAttributes: {
            label: '工单类型',
            prop: 'orderSmallType',
            rules: [...required],
          },
          events: {
            change: (val) => {
              if (val) {
                this.formData.orderSmallTypeText = this.orderSmallTypeData.find(item => item.value == val).label
              } else {
                this.formData.orderSmallTypeText = ''
              }
            }
          }
        },
        {
          name: 'el-select-add',
          options: this.websitList,
          md: 6,
          attributes: {
            placeholder: '请选择',
            clearable: true,
            filterable: true,
            disabled: this.formData.status == "OK"
          },
          formItemAttributes: {
            label: '网点名称',
            prop: 'websitId',
            rules: [...required],
          },
          events: {
            change: (val) => {
              this.formData.punishOrderWorkers = []
              this.getWorkers()
              if (val) {
                this.formData['websitName'] = this.websitList.find(item => item.value == val)?.label || val
              } else {
                this.formData['websitName'] = ''
              }
            }
          }
        },
        {
          name: 'slot-component',
          md: 24,
          formItemAttributes: {
            label: '处罚工程师',
            prop: 'punishOrderWorkers',
            rules: [...required],
          },
          render: (h, { props }) => {
            var { formData } = props
            return (
              <div>
                {
                  this.formData.status != "OK" ?
                    <div>
                      <el-button size="mini" type="primary" onClick={() => {
                        this.formData.punishOrderWorkers.unshift({
                          "amount": "",
                          "workerId": "",
                          "workerMobile": "",
                          "workerName": ""
                        })
                      }}>新增</el-button>
                    </div> : null
                }
                <zj-table
                  isDrop={true}
                  columns={this.workersColumns}
                  tableData={this.formData.punishOrderWorkers}
                ></zj-table>
              </div>
            )
          }
        },
        {
          name: 'el-input',
          md: 24,
          formItemAttributes: { label: '处罚备注', prop: 'remark' },
          attributes: {
            placeholder: '处罚备注',
            disabled: this.formData.status == "OK"
          }
        },
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '附件图片',
            prop: 'fileUrls',
            rules: []
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <ImageUpload fileList={this.formData.fileUrls} uid="imgSrc677766_materials_drawing_images" limit={100} isEdit={this.formData.status != "OK"} />
            )
          }
        },
      ]
    }
  },
  methods: {
    getorderSmallTypeData() {
      listPageV2({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.status", "compare": "=", "value": "true" }] }).then(res => {
        this.orderSmallTypeData = res.data.records.map(item => ({
          value: item.id,
          label: item.orderSmallTypeText
        }))
      })
    },
    getWebsitList() {
      getWebsit({ type: "C", status: true, isAll: true }).then(res => {
        this.websitList = res.data.map(item => ({
          label: item.name,
          value: item.websitId,
          data: item
        }))
      })
    },
    getWorkers() {
      if (this.formData.websitId) {
        memberListPageV2({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "b.examine_status", "compare": "=", "value": "OK" }, { "param": "b.websit_id", "compare": "=", "value": this.formData.websitId }] }).then(res => {
          this.workerList = res.data.records.map(item => {
            var { id, userId, ...data } = item
            return {
              value: userId,
              label: data.nickName,
              data: {
                workerId: userId,
                workerName: data.nickName,
                workerIdcard: data.idCard,
                workerMobile: data.mobile,
                ...data
              }
            }
          })
        })
      } else {
        this.workerList = []
      }
    },
    itemjiaoyanqita(index) {
      this.$refs.formRef.validateField([
        `punishOrderWorkers.${index}.workerId`,
        `punishOrderWorkers.${index}.workerMobile`,
        `punishOrderWorkers.${index}.amount`,
      ], (valid, invalidFields, errLabels) => { })
    },
  },
}