<template>
  <div>
    <el-steps
      :active="active"
      align-center
      finish-status="success"
      class="public-margin-t-20 public-margin-b-20"
    >
      <el-step title="客户信息" @click="handleStep(0)"></el-step>
      <el-step title="客户联系人" @click="handleStep(1)"></el-step>
      <el-step title="账户信息" @click="handleStep(2)"></el-step>
    </el-steps>

    <!-- 客户信息 -->
    <section class="public-padded-20" style="width: 95%">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="150px"
      >
        <el-row :gutter="30" v-show="active === 0">
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customerName">
              <el-input
                v-model="formData.customerName"
                placeholder="请输入客户名称"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户编号" prop="customerCode">
              <el-input
                v-model="formData.customerCode"
                placeholder="请输入客户编号"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请公司" prop="dhrmCompanyId">
              <el-input
                v-model="formData.dhrmCompanyId"
                placeholder="请输入申请公司"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网址" prop="website">
              <el-input
                v-model="formData.website"
                placeholder="请输入网址"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账期（月）" prop="stockCode">
              <el-input
                v-model="formData.stockCode"
                placeholder="请输入账期（月）"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年营业额（万元）" prop="yearBusiness">
              <el-input
                v-model="formData.yearBusiness"
                placeholder="请输入年营业额（万元）"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计项目毛利率(%)" prop="connectedEntities">
              <el-input
                v-model="formData.connectedEntities"
                placeholder="请输入预计项目毛利率(%)"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户成立时间" prop="registDate">
              <el-input
                v-model="formData.registDate"
                placeholder="请输入客户成立时间"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册资本金币种" prop="currency">
              <el-select
                v-model="formData.currency"
                placeholder="请选择注册资本金币种"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.currency_of_registered_capital"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册资本金（万元）" prop="capital">
              <el-input
                v-model="formData.capital"
                placeholder="请输入注册资本金（万元）"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人代表" prop="legalPerson">
              <el-input
                v-model="formData.legalPerson"
                placeholder="请输入法人代表"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工人数" prop="workforce">
              <el-input
                v-model="formData.workforce"
                placeholder="请输入员工人数"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行业" prop="trade">
              <el-select
                v-model="formData.trade"
                placeholder="请选择行业"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.CUSTOMER_TRADE"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请部门" prop="responsibleDept">
              <el-input
                v-model="formData.responsibleDept"
                placeholder="请输入申请部门"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司地址" prop="companyAddress">
              <el-input
                v-model="formData.companyAddress"
                placeholder="请输入公司地址"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业性质" prop="customerNature">
              <el-select
                v-model="formData.customerNature"
                placeholder="请选择企业性质"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.CUSTOMER_NATURE"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="customerType">
              <el-select
                v-model="formData.customerType"
                placeholder="请选择类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.PROJECT_TYPE"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户状态" prop="status">
              <el-select
                v-model="formData.status"
                placeholder="请选择客户状态"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.CUSTOMER_STATUS"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他性质" prop="otherNature">
              <el-input
                v-model="formData.otherNature"
                placeholder="请输入其他性质"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他类型" prop="otherCategory">
              <el-input
                v-model="formData.otherCategory"
                placeholder="请输入其他类型"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="相关资料" prop="fileMap" required>
              <el-upload
                ref="fileMap"
                :file-list="fileMapfileList"
                :action="imageFileAction"
                :before-upload="fileMapBeforeUpload"
              >
                <el-button size="small" type="primary" icon="el-icon-upload"
                  >点击上传</el-button
                >
              </el-upload>
              <span style="color: red">&nbsp;&nbsp;必须上传营业执照</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="申请事由" prop="mark">
              <el-input
                v-model="formData.mark"
                type="textarea"
                placeholder="请输入申请事由"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 客户联系人 -->
        <el-row :gutter="30" v-show="active === 1">
          <div style="width: 94%; margin-left: 65px">
            <el-button
              type="primary"
              @click="handleAdd"
              icon="el-icon-plus"
              class="public-margin-b-20"
            >
              新增客户联系人
            </el-button>
            <el-table
              class="public-margin-b-20"
              v-loading="loading"
              border
              :data="myUserList"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                fixed
                type="selection"
                width="55"
                align="center"
              />
              <el-table-column
                fixed
                label="客户联系人"
                width="150"
                align="center"
                prop="name"
              />
              <el-table-column
                label="客户传真"
                width="150"
                align="center"
                prop="fax"
              />
              <el-table-column
                label="客户手机"
                width="150"
                align="center"
                prop="phone"
              />
              <el-table-column
                label="客户办公室电话"
                width="150"
                align="center"
                prop="tel"
              />
              <el-table-column
                label="家庭电话"
                width="150"
                align="center"
                prop="tel2"
              />
              <el-table-column
                label="客户电子邮件"
                width="150"
                align="center"
                prop="email"
              />
              <el-table-column
                label="客户QQ/微信"
                width="150"
                align="center"
                prop="qq"
              />
              <el-table-column
                width="150"
                label="客户所属部门"
                align="center"
                prop="department"
              />
              <el-table-column
                label="客户职位"
                width="150"
                align="center"
                prop="position"
              />
              <el-table-column
                label="客户办公地址"
                width="150"
                align="center"
                prop="officeAddress"
              />
              <el-table-column
                label="客户来源"
                width="150"
                align="center"
                prop="source"
              />
              <el-table-column
                label="客户邮编"
                width="150"
                align="center"
                prop="postcode"
              />
              <el-table-column
                fixed="right"
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['system:file:edit']"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['system:file:remove']"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
          <!-- 添加客户联系人对话框 -->
          <el-dialog
            :title="title"
            :visible.sync="open"
            width="1000px"
            append-to-body
          >
            <el-form
              ref="addUserForm"
              :model="addUserForm"
              :rules="rules"
              label-width="120px"
            >
              <el-row :gutter="30">
                <el-col :span="12">
                  <el-form-item label="客户联系人" prop="name">
                    <el-input
                      v-model="addUserForm.name"
                      placeholder="请输入客户联系人"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户传真" prop="fax">
                    <el-input
                      v-model="addUserForm.fax"
                      placeholder="请输入客户传真"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户手机" prop="phone">
                    <el-input
                      v-model="addUserForm.phone"
                      placeholder="客户手机"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户办公室电话" prop="tel">
                    <el-input
                      v-model="addUserForm.tel"
                      placeholder="请输入客户办公室电话"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="家庭电话" prop="tel2">
                    <el-input
                      v-model="addUserForm.tel2"
                      placeholder="请输入家庭电话"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户电子邮件" prop="email">
                    <el-input
                      v-model="addUserForm.email"
                      placeholder="请输入客户电子邮件"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户QQ/微信" prop="qq">
                    <el-input
                      v-model="addUserForm.qq"
                      placeholder="请输入客户QQ/微信"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户所属部门" prop="department">
                    <el-input
                      v-model="addUserForm.department"
                      placeholder="请输入客户所属部门"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户职位" prop="position">
                    <el-input
                      v-model="addUserForm.position"
                      placeholder="请输入客户职位"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户办公地址" prop="officeAddress">
                    <el-input
                      v-model="addUserForm.officeAddress"
                      placeholder="请输入客户办公地址"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户来源" prop="source">
                    <el-input
                      v-model="addUserForm.source"
                      placeholder="请输入客户来源"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户邮编" prop="postcode">
                    <el-input
                      v-model="addUserForm.postcode"
                      placeholder="客户邮编"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-dialog>
        </el-row>
        <!-- 账户信息 -->
        <el-row :gutter="30" v-show="active === 2">
          <el-col :span="12">
            <el-form-item label="开户名称" prop="accountName">
              <el-input
                v-model="formData.accountName"
                placeholder="请输入开户名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司税号" prop="companyTaxNum">
              <el-input
                v-model="formData.companyTaxNum"
                placeholder="请输入公司税号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户银行" prop="bankOfDeposit">
              <el-input
                v-model="formData.bankOfDeposit"
                placeholder="请输入开户银行"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行账号" prop="bankAccount">
              <el-input
                v-model="formData.bankAccount"
                placeholder="请输入银行账号"
                clearable
              ></el-input>
            </el-form-item> </el-col
          ><el-col :span="12">
            <el-form-item label="客户公司地址" prop="compAddress">
              <el-input
                v-model="formData.compAddress"
                placeholder="请输入客户公司地址"
                clearable
              ></el-input>
            </el-form-item> </el-col
          ><el-col :span="12">
            <el-form-item label="客户公司电话" prop="companyPhone">
              <el-input
                v-model="formData.companyPhone"
                placeholder="请输入客户公司电话"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纳税人资质" prop="taxpayer">
              <el-input
                v-model="formData.taxpayer"
                placeholder="请输入纳税人资质"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="税率" prop="customerTaxrate">
              <el-select
                v-model="formData.customerTaxrate"
                placeholder="请选择税率"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in customerTaxrateOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="相关资料" prop="imageFile">
              <el-upload
                ref="imageFile"
                :file-list="imageFilefileList"
                :action="imageFileAction"
                :before-upload="imageFileBeforeUpload"
              >
                <el-button size="small" type="primary" icon="el-icon-upload"
                  >点击上传</el-button
                >
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="public-flex-end public-padded-b-30">
          <!-- <el-button type="primary" @click="last" v-show="active !== 0"> 上一步 </el-button> -->
          <el-button type="primary" @click="next"> 下一步 </el-button>
          <!-- v-show="active !== 2" -->
        </div>
      </el-form>
    </section>
  </div>
</template>
<script>
export default {
  name: "customerInformationAdd",
  components: {},
  dicts: [
    "CUSTOMER_STATUS", //客户状态
    "audit_status", //审核状态
    "start_using_yes_no", //是否启用
    "CUSTOMER_NATURE", //企业性质
    "CUSTOMER_TRADE", //客户行业
    "currency_of_registered_capital", //注册资本金币种
    "PROJECT_TYPE", //类型
  ],
  data() {
    return {
      active: 0,
      formData: {
        customerName: undefined,
        customerCode: undefined,
        dhrmCompanyId: undefined,
        website: undefined,
        stockCode: undefined,
        yearBusiness: undefined,
        connectedEntities: undefined,
        registDate: undefined,
        currency: undefined,
        capital: undefined,
        legalPerson: undefined,
        workforce: undefined,
        trade: undefined,
        responsibleDept: undefined,
        companyAddress: undefined,
        customerNature: undefined,
        customerType: undefined,
        status: undefined,
        fileMap: null,
        mark: undefined,
        currency: undefined,
      },
      rules: {
        customerName: [
          {
            required: true,
            message: "请输入客户名称",
            trigger: "blur",
          },
        ],
        customerCode: [
          {
            required: true,
            message: "请输入客户编号",
            trigger: "blur",
          },
        ],
        dhrmCompanyId: [
          {
            required: true,
            message: "请输入申请公司",
            trigger: "blur",
          },
        ],
        website: [
          {
            required: true,
            message: "请输入网址",
            trigger: "blur",
          },
        ],
        stockCode: [
          {
            required: true,
            message: "请输入账期（月）",
            trigger: "blur",
          },
        ],
        yearBusiness: [
          {
            required: true,
            message: "请输入年营业额（万元）",
            trigger: "blur",
          },
        ],
        connectedEntities: [
          {
            required: true,
            message: "请输入预计项目毛利率(%)",
            trigger: "blur",
          },
        ],
        registDate: [
          {
            required: true,
            message: "请输入客户成立时间",
            trigger: "blur",
          },
        ],
        currency: [
          {
            required: true,
            message: "请选择注册资本金币种",
            trigger: "change",
          },
        ],
        capital: [
          {
            required: true,
            message: "请输入注册资本金（万元）",
            trigger: "blur",
          },
        ],
        legalPerson: [
          {
            required: true,
            message: "请输入法人代表",
            trigger: "blur",
          },
        ],
        workforce: [
          {
            required: true,
            message: "请输入员工人数",
            trigger: "blur",
          },
        ],
        trade: [
          {
            required: true,
            message: "请选择行业",
            trigger: "change",
          },
        ],
        responsibleDept: [
          {
            required: true,
            message: "请选择申请部门",
            trigger: "change",
          },
        ],
        companyAddress: [
          {
            required: true,
            message: "请输入公司地址",
            trigger: "blur",
          },
        ],
        customerNature: [
          {
            required: true,
            message: "请选择企业性质",
            trigger: "change",
          },
        ],
        customerType: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择客户状态",
            trigger: "change",
          },
        ],
        mark: [
          {
            required: true,
            message: "请输入申请事由",
            trigger: "blur",
          },
        ],
        currency: [
          {
            required: true,
            message: "请输入注册资本金（万元）",
            trigger: "blur",
          },
        ],
      },
      imageFileAction: "https://jsonplaceholder.typicode.com/posts/",
      fileMapfileList: [],

      tradeOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      responsibleDeptOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      customerNatureOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      customerTypeOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      statusOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      customerTaxrateOptions: [],
      imageFilefileList: [],
      // 添加客户信息
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      // 客户表格数据
      myUserList: [],
      // 客户表单
      addUserForm: {
        name: null,
        fax: null,
        phone: null,
        tel: null,
        tel2: null,
        email: null,
        qq: null,
        department: null,
        position: null,
        officeAddress: null,
        source: null,
        postcode: null,
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加客户信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getFile(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改DGT请假流程审批";
      });
    },
    // 表单重置
    reset() {
      this.addUserForm = {
        name: null,
        fax: null,
        phone: null,
        tel: null,
        tel2: null,
        email: null,
        qq: null,
        department: null,
        position: null,
        officeAddress: null,
        source: null,
        postcode: null,
      };
      this.resetForm("addUserForm");
    },
    submitForm() {},
    getList() {},
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    imageFileBeforeUpload() {},
    // 切换步骤
    handleStep(active) {
      console.log("active=", active);
      this.active = active;
    },
    last() {
      if (this.active-- <= 0) this.active = 0;
    },
    next() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          alert("submit!");
          if (this.active++ >= 2) this.active = 0;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    fileMapBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-upload__tip {
  line-height: 1.2;
}
</style>