<template>
  <div id="">
    <a-layout style="height:520px;">
      <a-layout-header style="text-align: right; font-size: 12px;height:40px;">
        <a-button type="primary" @click="addHandler">添加走访人员</a-button>
      </a-layout-header>
      <a-layout-content style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
        <a-table :columns="columns" :data-source="tableData" rowKey="index" :pagination="false" style="width: 100%;">
          <span slot="knowResManager" slot-scope="text">
            <span style="font-weight:bolder;color:#67C23A" v-if="text.knowResManager == 1">是</span>
            <span style="font-weight:bolder;color:#F56C6C" v-if="text.knowResManager == 2">否</span>
          </span>
          <span slot="managerComment" slot-scope="text">
            <span style="font-weight:bolder;color:#F56C6C" v-if="text.managerComment == 3">不满意</span>
            <span style="font-weight:bolder;color:#E6A23C" v-if="text.managerComment == 2">一般</span>
            <span style="font-weight:bolder;color:#67C23A" v-if="text.managerComment == 1">满意</span>
          </span>
          <span slot="action" slot-scope="text">
            <a-button ghost @click="manageItem(text)" style="background-color: #67c23a; border-color: #67c23a;">编辑</a-button>
            <a-button type="danger" ghost @click="deleteItem(text)">删除</a-button>
          </span>
        </a-table>
      </a-layout-content>
      <a-modal :open="dialogFormVisible" title="走访情况填报" @ok="addSkZouFangSubmit('formObj')" @cancel="dialogFormVisible = false">
        <a-layout style="height:520px;">
          <a-layout-content style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
            <a-form :model="formObj" :label-col="{span: 8}" :wrapper-col="{span: 16}" :rules="rules">
              <p style="margin-top:10px;margin-bottom: 10px">
                <a-icon type="caret-right" /><span style="width:120px;padding-left: 10px">走访人员基本信息</span><span class="hrs"></span>
              </p>
              <a-form-item label="走访人员名称" prop="viewPreName">
                <a-input v-model:value="formObj.viewPreName" style="width:70%;"/>
              </a-form-item>
              <p style="margin-top:10px;margin-bottom: 10px">
                <a-icon type="caret-right" /><span style="width:120px;padding-left: 10px">走访人员调研信息</span><span class="hrs"></span>
              </p>
              <a-form-item label="是否知晓水库管护人员" prop="knowResManager">
                <a-radio-group v-model:value="addObj.knowResManager">
                  <a-radio value="1">是</a-radio>
                  <a-radio value="2">否</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="对管护责任人的评价" prop="managerComment" v-if="formObj.knowResManager == '1'">
                <a-radio-group v-model:value="addObj.managerComment">
                  <a-radio value="1">满意</a-radio>
                  <a-radio value="2">一般</a-radio>
                  <a-radio value="3">不满意</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="走访日期" prop="inspTm">
                <a-data-picker v-model="formObj.inspTm" placeholder="选择日期"></a-data-picker>
              </a-form-item>
              <a-form-item label="备注" prop="note">
                <a-textarea v-model:value="formObj.note" style="width:70%;" :rows="2" />
              </a-form-item>
            </a-form>
          </a-layout-content>
        </a-layout>
      </a-modal>
    </a-layout>
  </div>
</template>

<script>
import {
  addZouFangRenYuanList_sk,
  getSkZouFangViewId,
  getskZouFangByrgstrId,
  getZouFangrenYuanListByViewId,
  updateZouFangRenYuanList_sk,
} from '../../../api/duChaTianBao';
import request from '../../../utils/gw_ajax_request';
import { formatDateTimeD } from '../../../utils/gw_date';
export default {
  props: ['currentObjectRgstrId'],
  data() {
    var checkInput = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入走访人员名称'));
      } else {
        callback();
      }
    };
    return {
      tableData: [],
      dialogFormVisible: false,
      viewId: '',
      formObj: {
        viewPreName: '',
        knowResManager: '',
        managerComment: '',
        note: '',
        inspTm: '',
        viewId: '',
      },
      rules: {
        viewPreName: [
          {
            required: true,
            validator: checkInput,
            trigger: 'change',
          },
        ],
      },
      columns: [
        {
          title: '走访人姓名',
          dataIndex: 'viewPreName',
          align: 'center',
        },
        {
          title: '是否知晓水库管护员',
          dataIndex: 'knowResManager',
          align: 'center',
        },
        {
          title: '对管护责任人评价',
          dataIndex: 'managerComment',
          align: 'center',
        },
        {
          title: '走访日期',
          dataIndex: 'inspTm',
          align: 'center',
        },
        {
          title: '备注',
          dataIndex: 'note',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 160,
          fixed: 'right',
        },
      ],
    };
  },
  computed: {
    recPersId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
  },
  mounted() {
    this.getZouFangCun();
  },
  watch: {
    currentObjectRgstrId(n, o) {
      this.getZouFangCun();
    },
    dialogFormVisible(val) {
      if (!val) {
        this.getRenYuanListData();
      }
    },
  },
  methods: {
    cancelHandler() {
      this.$emit('cancelHandler');
    },
    makesure() {
      this.$emit('cancelHandler');
      this.$emit('addShuiKuSuccess');
    },
    addHandler: function () {
      this.formObj = {
        viewPreName: '',
        knowResManager: '',
        managerComment: '',
        note: '',
        viewId: '',
      };
      this.dialogFormVisible = true;
    },
    addZouFang: function () {
      this.dialogFormVisible = false;
    },
    getZouFangCun: function () {
      getskZouFangByrgstrId(this.currentObjectRgstrId).then(
        (res) => {
          if (res.data && res.success) {
            if (Object.hasOwn(res.data, 'viewId')) {
              this.viewId = res.data.viewId;
              this.getRenYuanListData();
            } else {
              this.getSkZouFangViewId();
            }
          } else {
            // console.log('未创建走访表，创建走访表');
            this.getSkZouFangViewId();
          }
        },
        (err) => {},
      );
    },
    getRenYuanListData: function () {
      getZouFangrenYuanListByViewId(this.viewId).then(
        (res) => {
          // console.log(res);
          this.tableData = res.data.list;
          this.tableData.forEach((ele) => {
            if (ele.knowResManager == '2') {
              ele.managerComment = '';
            }
          });
          if (this.tableData.length == 0) {
            request
              .post('/dc/insp/rsvrRgstr/update', {
                viewStat: 0,
                rgstrId: this.currentObjectRgstrId,
              })
              .then((res) => {});
          }
        },
        (err) => {},
      );
    },
    getSkZouFangViewId: function () {
      getSkZouFangViewId(this.recPersId, this.currentObjectRgstrId).then(
        (res) => {
          console.log(res);
          if (res.data && res.success) {
            this.viewId = res.data.viewId;
            this.getRenYuanListData();
          } else {
          }
        },
        (err) => {},
      );
    },
    addSkZouFangSubmit(formObj) {
      this.$refs[formObj].validate((valid) => {
        if (valid) {
          const updateArray = this.tableData;
          this.formObj['viewId'] = this.viewId;
          updateArray.push(this.formObj);
          updateZouFangRenYuanList_sk(
            updateArray,
            this.viewId,
            this.currentObjectRgstrId,
          ).then((res) => {
            console.log(res);
            request.post('/dc/rever/project', this.addObj).then((res) => {
              if (res.success) {
                this.$message.success('修改成功');
                request
                  .post('/dc/insp/rsvrRgstr/update', {
                    viewStat: 2,
                    rgstrId: this.currentObjectRgstrId,
                  })
                  .then((res) => {
                    this.getRenYuanListData();
                    this.$emit('addShuiKuSuccess');
                  });
              }
            });
            this.dialogFormVisible = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // addSkZouFangSubmit:function(){
    //   let updateArray = this.tableData;
    //   this.formObj['viewId'] = this.viewId;
    //   updateArray.push(this.formObj);
    //   updateZouFangRenYuanList_sk(updateArray,this.viewId,this.currentObjectRgstrId).then(
    //     (res) =>{
    //        console.log(res);
    //        this.getRenYuanListData();
    //         this.dialogFormVisible = false;
    //     }
    //   );
    // },
    manageItem: function (row) {
      const updateArray = [];
      this.tableData.forEach((element, index) => {
        if (element.viewPreName != row.viewPreName) {
          updateArray.push(element);
        }
      });
      this.formObj = row;

      this.dialogFormVisible = true;
      this.tableData = updateArray;
    },
    deleteItem: function (row) {
      const updateArray = [];
      this.tableData.forEach((element, index) => {
        if (element.viewPreId != row.viewPreId) {
          updateArray.push(element);
        }
      });
      updateZouFangRenYuanList_sk(
        updateArray,
        this.viewId,
        this.currentObjectRgstrId,
      ).then((res) => {
        console.log(res);
        this.getRenYuanListData();
      });
    },
  },
};
</script>

<style lang='less' scoped>

</style>
