<template>
  <div>
    <el-card>
    <el-form  :model="query" class="query-form" label-width="120px">
      <el-row>
        <el-col :span="7">
      <el-form-item label="用户账号:" >
        <el-input v-model="query.userName" style="width: 100%" placeholder="请输入用户账号" clearable></el-input>
      </el-form-item>
        </el-col>
        <el-col :span="7">
      <!--<el-form-item label="状态:">-->
      <!--  <el-select v-model="query.userFlag" style="width: 100%" placeholder="请选择状态">-->
      <!--    <el-option label="全部" value=""></el-option>-->
      <!--    <el-option label="禁用" value="0"></el-option>-->
      <!--    <el-option label="正常" value="1"></el-option>-->
      <!--    <el-option label="未验证" value="2"></el-option>-->
      <!--  </el-select>-->
      <!--</el-form-item>-->
        </el-col>
      <!--
            <el-form-item class="query-form-item">
                <el-select v-model="query.roleId" placeholder="角色">
                    <el-option label="全部角色" value=""></el-option>
                    <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
-->
        <el-col :span="9">
      <el-form-item>
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onReset"
          ></el-button>
          <el-button type="primary" icon="search" @click="onSubmit"
            >查询</el-button
          >
          <!--<el-button type="primary" v-if="currentCustomerId === 110" @click.native="handleForm(null, null)"-->
          <!--  >新增</el-button-->
          <!--&gt;-->
        </el-button-group>
      </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table v-loading="loading" :data="list" style="width: 100%"  border highlight-current-row>
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column label="用户账号" prop="userName" > </el-table-column>
      <el-table-column label="系统负责人名称" prop="name" >
      </el-table-column>
      <el-table-column label="系统负责人电话" prop="tel" >
      </el-table-column>
      <el-table-column label="系统负责人qq" prop="qq" >
      </el-table-column>
      <el-table-column label="系统负责人微信" prop="weChat" >
      </el-table-column>
      <el-table-column label="系统负责人邮箱" prop="email" >
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" >
      </el-table-column>


      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native="handleForm(scope.$index, scope.row)"
            >编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native="handleDel(scope.$index, scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="query.limit"
        :page.sync="query.page"
        @pagination="handleCurrentChange"
      ></pagination>

    <!--表单-->
    <el-dialog
      :title="formMap[formName]"
      :visible.sync="formVisible"
      :before-close="hideForm"
      append-to-body
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="60%"
    >
      <el-form :model="formData" :rules="formRules" ref="dataForm"   label-width="120px">
        <el-row >
          <el-col :span="11" >
                <el-form-item label="系统负责人名称" prop="name">
                  <el-input
                    v-model="formData.name"
                    style="width: 90%"
                    size="small"
                    clearable
                  ></el-input>
                </el-form-item>
          </el-col>

          <el-col :span="11" >

              <el-form-item label="用户账号" prop="userName">
                <el-input v-model="formData.userName" size="small" style="width: 90%" clearable></el-input>
              </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="11" >
              <el-form-item label="登录密码" prop="password">
                <el-input
                  type="password"
                  size="small"
                  v-model="formData.password"
                  style="width: 90%"
                ></el-input>
              </el-form-item>

          </el-col>
          <el-col :span="11" >
                <el-form-item label="确认密码" prop="checkPassword">
                  <el-input
                    type="password"
                    size="small"
                    v-model="formData.checkPassword"
                    style="width: 90%"
                  ></el-input>
                </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11" >
            <el-form-item label="系统负责人电话" prop="tel">
              <el-input
                size="small"
                v-model="formData.tel"
                style="width: 90%"
              ></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="11" >
            <el-form-item label="系统负责人qq" prop="qq">
              <el-input
                size="small"
                v-model="formData.qq"
                style="width: 90%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11" >
            <el-form-item label="系统负责人微信" prop="weChat">
              <el-input
                size="small"
                v-model="formData.weChat"
                style="width: 90%"
              ></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="11" >
            <el-form-item label="系统负责人邮箱" prop="email">
              <el-input
                size="small"
                v-model="formData.email"
                style="width: 90%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="hideForm" size="small">取消</el-button>
        <el-button
          type="primary"
          size="small"
          @click.native="formSubmit()"
          :loading="formLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>
      </el-card>
  </div>
</template>

<script>
import { filterList ,updatePerSon,daletePerSon} from "@/api/sup/userPerson";


const formJson = {
  id: "",
  userName: "",
  name: "",
  tel: "",
  qq: "",
  weChat: "",
  email: "",
  createTime: "",
  companyId:"",
};
export default {
  name: "currentCustomer",
  props: {
    currentCustomer: "",

    closeCustomerDialog: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      roles: [],
      query: {
        userName: "",
        name: "",
        page: 1,
        limit: 20,
        tel: "",
        qq: "",
        weChat: "",
        email: "",
        createTime: "",
        companyId:"",
      },
      list: [],
      total: 0,
      loading: true,
      index: null,
      formName: null,
      formMap: {
        add: "新增",
        edit: "编辑",
      },

      userInfo: {
        customerId: "",
        userId: "",
        roles: [],
      },
      formLoading: false,
      formVisible: false,
      formData: formJson,
      formRules: {},
      addRules: {
        userName: [{ required: true, message: "请输入用户账号", trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        checkPassword: [
          {
            required: true,
            message: "请再次输入密码",
            trigger: "blur",
          },
          { validator: validatePass2, trigger: "blur" },
        ],
        userFlag: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
      },
      editRules: {
        userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        userFlag: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
      },
      deleteLoading: false,
      currentCustomerId: this.$store.getters.customerId
    };
    let validatePass = (rule, value, callback) => {
      debugger
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formData.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.query = {
        userName: "",
        userFlag: "",
        page: 1,
        limit: 20,
        roleId: "",
        customerId: this.currentCustomer,
      };
      this.getList();
    },
    onSubmit() {
      this.$router.push({
        path: "",
        query: this.query,
      });
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getList();
    },
    getList() {
      this.loading = true;
      filterList(this.query)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
          this.roles = [];
        });
    },

    // 刷新表单
    resetForm() {
      if (this.$refs["dataForm"]) {
        // 清空验证信息表单
        this.$refs["dataForm"].clearValidate();
        // 刷新表单
        this.$refs["dataForm"].resetFields();
      }
    },

    // 隐藏表单
    hideForm() {
      // 更改值
      this.formVisible = !this.formVisible;
      // 清空表单
      this.$refs["dataForm"].resetFields();
      return true;
    },

    // 显示表单
    handleForm(index, row) {
      this.formVisible = true;

      this.formData = JSON.parse(JSON.stringify(formJson));
      if (row !== null) {
        this.formData = Object.assign({}, row);
      }
      this.formName = "add";
      this.formRules = this.addRules;
      if (index !== null) {
        this.index = index;
        this.formName = "edit";
        this.formRules = this.editRules;
      }
    },

    formSubmit() {
      this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            updatePerSon(this.formData)
              .then((res) => {
                if (res.code == 20000) {
                  this.$message({
                    type: "success",
                    message: "提交成功！",
                  });
                  this.closeCustomerDialog();
                }
              })
          }
      });
    },
    // 删除
    handleDel(index, row) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(()=>{
        let param={
          id:row.id
        }
        daletePerSon(param)
          .then((res)=>{
            if(res.code == 20000){
              this.$message({
                type: "success",
                message: "删除成功！",
              });
            }
            this.closeCustomerDialog();
          })


      }).catch(()=>{

      })



    },
  },


  created() {
   this.query.companyId = this.currentCustomer;
    this.getList();
  },

};
</script>

<style type="text/scss" lang="scss">
</style>
