<template>
  <basic-container>
    <div class="avue-crud">
      <el-row>
        <a-col :span="2">
          <el-button @click="handleViewpda">返 回</el-button>
        </a-col>
      </el-row>
      <avue-form :option="padoption" ref="myForm" v-model="dataForm" @row-update="rowUpdate">
        <template #input="{ row }">
          <el-tag>序号:{{ row.$index }}-数据:{{ row.input }}</el-tag>
        </template>
      </avue-form>
      <el-row>
        <el-col :offset="11">
          <el-button type="primary" @click="rowUpdate" v-if="!this.edt">提 交</el-button>
        </el-col>
      </el-row>
      <el-divider>维修记录</el-divider>
      <el-row v-if="!this.edt">
        <div class="avue-crud__header">
          <!-- 头部左侧按钮模块 -->
          <div class="avue-crud__left">
            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新 增</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handleDelete" plain
              >删 除</el-button
            >
          </div>
        </div>
      </el-row>
      <el-row>
        <!-- 列表模块 -->
        <el-table
          ref="table"
          v-loading="loading"
          @selection-change="selectionChange"
          :data="data"
          :height="height"
          style="width: 100%"
          :border="option.border"
        >
          <el-table-column
            type="selection"
            v-if="option.selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
          <el-table-column v-if="option.index" label="序号" type="index" width="80" align="center">
          </el-table-column>
          <template v-for="(item, index) in option.column">
            <!-- table字段 -->
            <el-table-column
              v-if="item.hide !== true"
              :prop="item.prop"
              :label="item.label"
              align="center"
              :width="item.width"
              :key="index"
            >
            </el-table-column>
          </template>
          <!-- 操作栏模块 -->
          <el-table-column prop="menu" label="操作" :width="220" align="center">
            <template #="{ row }">
              <el-button type="primary" text icon="el-icon-view" @click="handleView(row)"
                >查看</el-button
              >
              <el-button
                type="primary"
                text
                icon="el-icon-edit"
                @click="handleEdit(row)"
                v-if="!this.edt"
                >编辑</el-button
              >
              <el-button
                type="primary"
                text
                icon="el-icon-delete"
                @click="rowDel(row)"
                v-if="!this.edt"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <div class="avue-crud__pagination" style="width: 100%">
          <!-- 分页模块 -->
          <el-pagination
            align="right"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="page.currentPage"
            :page-sizes="[30, 50, 80, 120]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div>
      </el-row>
      <!-- 表单模块 -->
      <el-dialog
        :title="title"
        v-model="box"
        width="50%"
        :before-close="beforeClose"
        append-to-body
      >
        <el-form
          :disabled="view"
          :size="option.size"
          :rules="validatorRules"
          ref="form"
          :model="form"
          label-width="80px"
        >
          <!-- 表单字段 -->
          <!--          <el-form-item label="关联pdaid" prop="masterId">-->
          <!--            <el-input v-model="form.masterId" placeholder="请输入关联pdaid"/>-->
          <!--          </el-form-item>-->

          <el-row>
            <el-col :span="11">
              <el-form-item label="反馈日期" prop="feedbackTime" label-width="80px">
                <el-date-picker
                  v-model="form.feedbackTime"
                  placeholder="请输入反馈日期"
                  type="date"
                  value-format="YYYY-MM-DD"
                  style="position: absolute; right: 0px; width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="营业部" prop="businessDepartment" label-width="120px">
                <el-input
                  v-model="form.businessDepartment"
                  placeholder="请输入营业部"
                  style="position: absolute; right: 0px; width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="维修公司" prop="maintenanceCompany" label-width="80px">
                <el-input
                  v-model="form.maintenanceCompany"
                  placeholder="请输入维修公司"
                  style="position: absolute; right: 0px; width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采买经销商" prop="dealer" label-width="120px">
                <el-input
                  v-model="form.dealer"
                  placeholder="请输入采买经销商"
                  style="position: absolute; right: 0px; width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="问题描述" prop="problemDescription" label-width="80px">
                <el-input
                  v-model="form.problemDescription"
                  placeholder="请输入问题描述"
                  style="position: absolute; right: 0px; width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否保修期" prop="isLiability" label-width="120px">
                <el-select
                  v-model="form.isLiability"
                  clearable
                  placeholder="是否保修期"
                  style="position: absolute; right: 0px; width: 100%"
                >
                  <el-option
                    v-for="item in isLiabilityData"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="寄回日期" prop="returnDate" label-width="80px">
                <el-date-picker
                  v-model="form.returnDate"
                  placeholder="请输入寄回日期"
                  type="date"
                  value-format="YYYY-MM-DD"
                  style="position: absolute; right: 0px; width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="寄检修快递单号" prop="repairTrackingNub" label-width="120px">
                <el-input
                  v-model="form.repairTrackingNub"
                  placeholder="请输入寄检修快递单号"
                  style="position: absolute; right: 0px; width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="寄回单号" prop="returnOrderNub" label-width="80px">
                <el-input
                  v-model="form.returnOrderNub"
                  placeholder="请输入维修寄回单号"
                  style="position: absolute; right: 0px; width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维修费(元)" prop="maintenanceCosts" label-width="120px">
                <el-input
                  v-model="form.maintenanceCosts"
                  placeholder="请输入维修费用;单位（元）"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="23">
              <el-form-item label="备注" prop="notes">
                <el-input v-model="form.notes" placeholder="请输入备注" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 表单按钮 -->
        <template #footer>
          <span v-if="!view" class="dialog-footer">
            <el-button type="primary" icon="el-icon-circle-check" @click="handleSubmit"
              >提 交</el-button
            >
            <el-button icon="el-icon-circle-close" @click="box = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove } from '@/api/basic/basicPdarecords';
import { getDetail as getDetailPda, update as updatepda } from '@/api/basic/basicPda';
import option from '@/option/basic/basicPdarecords';
import pdaoption from '@/option/basic/basicPda';
import { mapGetters } from 'vuex';
import { getDictionaryBiz } from '@/api/system/dict';

export default {
  data() {
    return {
      height: 300,
      // 弹框标题
      title: '',
      // 是否展示弹框
      box: false,
      dataForm: {},
      // 是否显示查询
      search: true,
      //是否显示新增
      isadd: false,
      // 加载中
      loading: true,
      //查看按钮
      edt: JSON.parse(this.$route.query.edt),
      //查看pda
      padview: false,
      // 是否为查看模式
      view: false,
      // 查询信息
      query: {
        descs: 'feedback_time',
      },
      // 分页信息
      page: {
        currentPage: 1,
        pageSize: 30,
        total: 40,
      },
      // 表单数据
      form: {},
      // 选择行
      selectionList: [],
      isLiabilityData: [],
      //状态列表
      stateData: [],
      // 表单配置
      option: option,
      padoption: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: false,
        editBtn: false,
        emptyBtn: false, //清空按钮
        submitBtn: false, //隐藏提交按钮
        searchMenuSpan: 6,
        disabled: JSON.parse(this.$route.query.edt),
        border: true,
        index: true,
        viewBtn: false,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: '产品名称',
            prop: 'name',
            type: 'input',
            search: true,
            labelWidth: '150',
            width: '100px',
            align: 'center',
            span: 7,
          },
          {
            label: '型号',
            prop: 'model',
            type: 'input',
            search: true,
            labelWidth: '150',
            width: '100px',
            align: 'center',
            span: 7,
          },
          {
            label: '设备序列号S/N',
            prop: 'deviceSerialNumber',
            type: 'input',
            search: true,
            labelWidth: '150',
            width: '150px',
            align: 'center',
            span: 7,
          },
          {
            label: '购买金额',
            prop: 'purchaseAmount',
            type: 'input',
            labelWidth: '150',
            width: '100px',
            align: 'center',
            span: 7,
          },
          {
            label: '状态',
            prop: 'state',
            type: 'select',
            search: true,
            labelWidth: '150',
            width: '100px',
            align: 'center',
            span: 7,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_pad_state',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            rules: [{ required: true, message: '请选择状态!', trigger: 'blur' }],
          },
          {
            label: '当前使用仓',
            prop: 'currentUsageWarehouse',
            type: 'input',
            search: true,
            labelWidth: '150',
            width: '120px',
            align: 'center',
            span: 7,
          },
          {
            label: '使用人',
            prop: 'user',
            type: 'input',
            search: true,
            labelWidth: '150',
            width: '120px',
            align: 'center',
            span: 7,
          },
          // {
          //   label: "使用人岗位id",
          //   prop: "userPositionId",
          //   type: "input",
          //   search: true,
          // },
          {
            label: '使用人岗位',
            prop: 'userPosition',
            type: 'input',
            labelWidth: '150',
            width: '120px',
            align: 'center',
            span: 7,
          },
          {
            label: '是否收取押金',
            prop: 'isDeposit',
            type: 'select',
            labelWidth: '150',
            width: '150px',
            align: 'center',
            span: 7,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=yes_no',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
          },
          {
            label: '押金金额(元)',
            prop: 'deposit',
            type: 'input',
            labelWidth: '150',
            width: '120px',
            align: 'center',
            span: 7,
          },
          {
            label: '采购公司',
            prop: 'purchasingCompany',
            type: 'input',
            labelWidth: '150',
            width: '100px',
            align: 'center',
            span: 7,
          },
          {
            label: '购买时间',
            prop: 'buyingTime',
            type: 'date',
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            labelWidth: '150',
            width: '120px',
            align: 'center',
            span: 7,
          },
          {
            label: '保修截止时间',
            prop: 'warrantyPeriodEndTime',
            type: 'date',
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            labelWidth: '150',
            width: '120px',
            align: 'center',
            span: 7,
          },
          {
            label: '备注',
            prop: 'notes',
            type: 'input',
            labelWidth: '150',
            width: '100px',
            align: 'center',
            span: 7,
          },
          {
            label: '图片',
            prop: 'photo',
            type: 'upload',
            dataType: 'string',
            listType: 'picture-img',
            // hide: true,
            labelWidth: '150',
            span: 7,
            multiple: false,
            width: '200px',
            align: 'left',
            action: '/blade-resource/oss/endpoint/put-file',
            propsHttp: {
              res: 'data',
              url: 'link',
            },
          },
        ],
      },
      // 表单列表
      data: [],
      //维修规则
      validatorRules: {
        isLiability: [{ required: true, message: '请填写是否保修期!', trigger: 'blur' }],
        maintenanceCosts: [
          {
            required: true,
            message: '请输入维修费用!',
            trigger: 'blur',
          },
          { pattern: /(^[1-9]\d{0,9}(\.\d{1,3})?$)|(^0(\.\d{1,2})?$)/, message: '费用格式不正确!' },
        ],
      },
      //pda规则
      rules: {},
    };
  },

  props: {
    pdaformdata: {
      type: Object,
    },
  },
  watch: {
    // eslint-disable-next-line no-unused-vars
    $route(to, from) {
      // this.isadd =false;
      // this.query.masterId = null;
      // this.masterId = null;
      if (!!this.$route.query.data) {
        //   //做一些路由变化的响应
        //   //   this.isadd =true;
        //   this.query.masterId = this.$route.query.data;
        //   this.masterId = this.$route.query.data;
        //重新获取数据
        this.onLoad(this.page);
      } else {
      }
    },
  },
  mounted() {
    this.init();
    this.onLoad(this.page);
  },
  created() {
    //查询字典
    this.queryDictionary();
  },
  computed: {
    ...mapGetters(['permission']),
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
  },
  methods: {
    //修改
    rowUpdate() {
      this.$refs.myForm.validate(valid => {
        if (valid) {
          let row = this.dataForm;
          updatepda(row).then(
            () => {
              this.$message({
                type: 'success',
                message: '操作成功!',
              });
              let str = {
                val: true,
              };
              this.$emit('returnpda', str);
            },
            error => {
              console.log(error);
            }
          );
        }
      });
    },
    queryDictionary() {
      getDictionaryBiz('yes_no').then(res => {
        this.isLiabilityData = res.data.data;
      });
      // getDictionaryBiz('basic_pad_state').then(res => {
      //   this.stateData = res.data.data;
      // });
    },
    //返回
    handleViewpda() {
      // this.$store.dispatch(this.$route.path, this.$route);
      this.$router.push({
        path: '/basic/pda/basicPda',
      });
      // let str = {
      //   val: false
      // }
      // this.$emit("returnpda", str);
    },
    init() {
      // console.log("this.$route.query.edt>>>>>>>",this.$route.query.edt);
      // this.padoption.disabled = false
      this.height = this.setPx(document.body.clientHeight - 340);
    },
    searchHide() {
      this.search = !this.search;
    },
    searchChange() {
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (!this.form.id) {
            this.form.masterId = this.pdaformdata.id;
            add(this.form).then(() => {
              this.box = false;
              this.onLoad(this.page);
              this.$message({
                type: 'success',
                message: '操作成功!',
              });
            });
          } else {
            update(this.form).then(() => {
              this.box = false;
              this.onLoad(this.page);
              this.$message({
                type: 'success',
                message: '操作成功!',
              });
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleAdd() {
      this.title = '新增';
      this.form = {};
      this.box = true;
    },
    handleEdit(row) {
      this.title = '编辑';
      this.box = true;
      getDetail(row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleView(row) {
      this.title = '查看';
      this.view = true;
      this.box = true;
      getDetail(row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.selectionClear();
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    beforeClose(done) {
      done();
      this.form = {};
      this.view = false;
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.table.clearSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      //  if (this.pdaformdata) {
      let id = this.$route.query.data;
      this.query.masterId = id;
      // }
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        // eslint-disable-next-line no-empty
        for (let i = 0; i < data.records.length; i++) {
          // eslint-disable-next-line no-empty
          for (let j = 0; j < this.isLiabilityData.length; j++) {
            // eslint-disable-next-line no-empty
            if (data.records[i].isLiability == this.isLiabilityData[j].dictKey) {
              data.records[i].isLiability = this.isLiabilityData[j].dictValue;
            }
          }
        }
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });

      getDetailPda(id).then(res => {
        const data = res.data.data;
        this.dataForm = data;
      });
      console.log('this.edt>>>>>>>>>>>>>>', this.edt);

      // this.dataForm = this.pdaformdata;
    },
  },
};
</script>
