<template>
  <div class="app-container">
    <h2>新增客户</h2>
    <el-form
      ref="formCampaign"
      :model="formCampaign"
      :rules="rules"
      label-width="150px"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card class="box-card">
            <el-form-item label="客户名称" prop="customerName">
              <el-input
                placeholder="请输入客户名称"
                v-model="formCampaign.customerName"
                style="width: 450px"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="快手小店ID" prop="ksId">
              <el-input
                placeholder="请输入快手小店ID"
                v-model="formCampaign.ksId"
                :disabled="editVisble"
                style="width: 450px"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="投放平台" prop="launchType">
              <el-select
                v-model="formCampaign.launchType"
                placeholder="选择投放平台"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="(item, index) in formList.launchTypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="销售" prop="saleLeaderId">
              <el-select
                v-model="formCampaign.saleLeaderId"
                placeholder="请选择销售"
                clearable
                value-key="value"
                style="width: 240px"
              >
                <el-option
                  v-for="item in formList.saleLeaderList"
                  :key="item.value"
                  :label="item.label"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input
                placeholder="请输入联系方式"
                v-model="formCampaign.phone"
                style="width: 450px"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="企业名称" prop="businessName">
              <el-input
                placeholder="请输入企业名称"
                v-model="formCampaign.businessName"
                style="width: 450px"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="营业执照编码/统一社会信用代码"
              prop="licenseCode"
            >
              <el-input
                placeholder="请输入营业执照编码/统一社会信用代码"
                v-model="formCampaign.licenseCode"
                style="width: 450px"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="以企业主体为推广主体（软著主体与企业名称是否一致）"
              prop="asMainBody"
            >
              <el-radio-group v-model="formCampaign.asMainBody">
                <el-radio-button
                  v-for="(item, index) in formList.asMainBodyList"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-radio-button
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="快手小店的链接" prop="ksUrl">
              <el-input
                placeholder="请输入快手小店的链接"
                v-model="formCampaign.ksUrl"
                style="width: 450px"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="推广内容" prop="sponsoredContent">
              <el-input
                placeholder="请输入推广内容"
                v-model="formCampaign.sponsoredContent"
                style="width: 450px"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="注册地" prop="registration">
              <el-input
                placeholder="请输入注册地"
                v-model="formCampaign.registration"
                style="width: 450px"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="所有资质有效期">
              <el-form-item
                label="营业执照有效期"
                prop="businessLicenseValidity"
              >
                <el-radio-group v-model="formCampaign.businessLicenseValidity">
                  <el-radio-button label="-">长期</el-radio-button>
                  <el-radio-button label="f">非长期</el-radio-button>
                </el-radio-group>
                <el-date-picker
                  style="position: relative; top: 4px"
                  v-model="formCampaign.businessLicenseValidityValue"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  v-if="formCampaign.businessLicenseValidity == 'f'"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                label="计算机软件著作权登记证书有效期"
                prop="copyrightValidity"
                style="margin: 10px 0"
              >
                <el-radio-group v-model="formCampaign.copyrightValidity">
                  <el-radio-button label="-">长期</el-radio-button>
                  <el-radio-button label="f">非长期</el-radio-button>
                </el-radio-group>
                <el-date-picker
                  v-model="formCampaign.copyrightValidityValue"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  v-if="formCampaign.copyrightValidity == 'f'"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="承诺函有效期" prop="commitmentValidity">
                <el-radio-group v-model="formCampaign.commitmentValidity">
                  <el-radio-button label="-">长期</el-radio-button>
                  <el-radio-button label="f">非长期</el-radio-button>
                </el-radio-group>
                <el-date-picker
                  v-model="formCampaign.commitmentValidityValue"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  v-if="formCampaign.commitmentValidity == 'f'"
                >
                </el-date-picker>
              </el-form-item>
            </el-form-item>
            <el-form-item label="营业执照链接" prop="businessLicenseUrl">
              <vueUpload ref="businessLicenseUrl" :multiple="false"></vueUpload>
              <!-- //live-1301855440.cos.ap-chongqing.myqcloud.com/CaoPanShou/20220816/2-1660638104302.png -->
            </el-form-item>
            <el-form-item label="ICP备案证明" prop="copyrightUrl">
              <vueUpload ref="copyrightUrl" :multiple="false"></vueUpload>
            </el-form-item>
            <el-form-item label="承诺函链接" prop="commitmentUrl">
              <vueUpload ref="commitmentUrl" :multiple="false"></vueUpload>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="24">
          <div class="dialog-footer" style="float: right; margin-top: 15px">
            <el-button
              type="primary"
              @click="submitForm"
              :loading="confirmLoading"
              >确 定</el-button
            >
            <el-button @click="close">取 消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { refreshCache } from "@/api/system/dict/type";
import vueUpload from "../trader/components/vueUpload";
import FileUpload from "../trader/components/upload";

import { editLaunch, addLaunchList, getById } from "@/api/live/live";

import {
  getAccountList,
  getQueryRolesList,
  customerAdd,
  customerEdit,
  customerInfo,
} from "@/api/trader/trader";

export default {
  name: "create-live",
  components: {
    vueUpload,
    FileUpload,
  },
  data() {
    var urlValid = (rule, value, callback) => {
      value = value + "";
      if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != "") {
        callback();
      } else {
        callback("链接不能为空且开头为http://或https://");
      }
    };
    return {
      userId: undefined,
      confirmLoading: false,
      //广告创建表单
      formCampaign: {
        asMainBody: 1,
        businessLicenseValidity: "-",
        copyrightValidity: "-",
        commitmentValidity: "-",
      },

      //表单使用的下拉列表
      formList: {
        liveCreativeTypeList: [
          { value: 1, label: "直播投流", disabled: false },
          { value: 2, label: "视频引流", disabled: true },
        ],
        launchTypeList: [
          { value: "cljn", label: "磁力金牛" },

          { value: "cp", label: "操盘" },
        ], //账户类型下拉
        saleLeaderList: [],
        asMainBodyList: [
          { value: 1, label: "是" },
          { value: 0, label: "否" },
        ],
      },
      //表单验证
      rules: {
        customerName: [
          {
            required: true,
            message: "客户名称必填",
            trigger: "blur",
          },
          {
            min: 5,
            max: 100,
            message: "客户名称最少输入5个字符",
            trigger: "change",
          },
        ],
        ksId: [
          {
            required: true,
            message: "快手小店ID必填",
            trigger: "blur",
          },
        ],
        launchType: [
          {
            required: true,
            message: "投放平台必选",
            trigger: "change",
          },
        ],
        saleLeaderId: [
          {
            required: true,
            message: "销售必选",
            trigger: "change",
          },
        ],
        businessName: [
          {
            required: true,
            message: "企业名称必填",
            trigger: "blur",
          },
          {
            min: 5,
            max: 100,
            message: "企业名称最少输入5个字符",
            trigger: "change",
          },
        ],
        licenseCode: [
          {
            required: true,
            message: "营业执照编码/统一社会信用代码必填",
            trigger: "blur",
          },
          {
            min: 5,
            max: 100,
            message: "营业执照编码/统一社会信用代码最少输入5个字符",
            trigger: "change",
          },
        ],
        ksUrl: [
          {
            required: true,
            message: "快手小店链接必填",
            trigger: "blur",
          },
          {
            validator: urlValid,
          },
        ],
        sponsoredContent: [
          {
            required: true,
            message: "推广内容必填",
            trigger: "blur",
          },
          {
            validator: urlValid,
          },
        ],
      },
    };
  },
  created() {
    this.userId = this.$store.getters.userId;
    this.getSaleList();
    if (this.$route && this.$route.query.id) {
      this.editRecordId = this.$route.query.id;
      this.editVisble = true;
      this.getDetail(this.editRecordId);
    }
  },
  filters: {},
  methods: {
    getDetail(item) {
      customerInfo({ ksId: +item })
        .then((res) => {
          var data = res.data;
          this.$set(this.formCampaign, "customerName", data.customerName);
          this.$set(this.formCampaign, "ksId", data.ksId);
          this.$set(this.formCampaign, "launchType", data.launchType);

          this.$set(this.formCampaign, "saleLeaderId", {
            value: +data.saleLeaderId,
            label: data.saleLeader,
          });
          this.$set(this.formCampaign, "phone", data.phone);
          this.$set(this.formCampaign, "businessName", data.businessName);
          this.$set(this.formCampaign, "licenseCode", data.licenseCode);
          this.$set(this.formCampaign, "asMainBody", data.asMainBody);
          this.$set(this.formCampaign, "ksUrl", data.ksUrl);
          this.$set(this.formCampaign, "registration", data.registration);

          this.$set(
            this.formCampaign,
            "sponsoredContent",
            data.sponsoredContent
          );

          if (data.businessLicenseValidity == "-") {
            this.$set(
              this.formCampaign,
              "businessLicenseValidityValue",
              undefined
            );
            this.$set(this.formCampaign, "businessLicenseValidity", "-");
          } else {
            this.$set(
              this.formCampaign,
              "businessLicenseValidityValue",
              data.businessLicenseValidity
            );
            this.$set(this.formCampaign, "businessLicenseValidity", "f");
          }

          if (data.copyrightValidity == "-") {
            this.$set(this.formCampaign, "copyrightValidityValue", undefined);
            this.$set(this.formCampaign, "copyrightValidity", "-");
          } else {
            this.$set(
              this.formCampaign,
              "copyrightValidityValue",
              data.copyrightValidity
            );
            this.$set(this.formCampaign, "copyrightValidity", "f");
          }

          if (data.commitmentValidity == "-") {
            this.$set(this.formCampaign, "commitmentValidityValue", undefined);
            this.$set(this.formCampaign, "commitmentValidity", "-");
          } else {
            this.$set(
              this.formCampaign,
              "commitmentValidityValue",
              data.commitmentValidity
            );
            this.$set(this.formCampaign, "commitmentValidity", "f");
          }
          this.$nextTick(() => {
            this.$refs.businessLicenseUrl.fileList = [
              {
                name: "0",
                status: "done",
                uid: "0",
                url: data.businessLicenseUrl,
              },
            ];
            if (!!data.copyrightUrl) {
              this.$refs.copyrightUrl.fileList = [
                {
                  name: "0",
                  status: "done",
                  uid: "0",
                  url: data.copyrightUrl,
                },
              ];
            }

            this.$refs.commitmentUrl.fileList = [
              {
                name: "0",
                status: "done",
                uid: "0",
                url: data.commitmentUrl,
              },
            ];
          });
        })
        .catch(() => {});
    },
    // 获取销售
    getSaleList() {
      getQueryRolesList({ type: 2 })
        .then((res) => {
          this.formList.saleLeaderList = res.data.map((item) => {
            return {
              value: item.userId,
              label: item.nickName,
            };
          });
        })
        .catch((error) => {});
    },
    close() {
      if (this.editRecordId) {
        const obj = {
          path: "/live/create",
          query: { id: this.editRecordId },
        };
        const objOpen = { path: "/live/index" };
        this.$tab.closeOpenPage(obj);
        this.$tab.closePage(obj);
        this.$router.push(objOpen.path);
      } else {
        const obj = { path: "/live/create" };
        const objOpen = { path: "/live/index" };
        this.$tab.closeOpenPage(obj);
        this.$tab.closePage(obj);
        this.$router.push(objOpen.path);
      }
    },
    // 创建
    submitForm() {
      this.$refs["formCampaign"].validate((valid) => {
        if (valid) {
          var that = this;

          var businessLicenseUrl = this.$refs.businessLicenseUrl.fileList;
          var copyrightUrl = this.$refs.copyrightUrl.fileList;
          var commitmentUrl = this.$refs.commitmentUrl.fileList;

          if (businessLicenseUrl.length == 0 || commitmentUrl.length == 0) {
            this.$message.error("营业执照和承诺函必须上传");
            return;
          }
          var params = { ...this.formCampaign };
          params.businessLicenseUrl = businessLicenseUrl[0].url;
          params.copyrightUrl =
            copyrightUrl.length > 0 ? copyrightUrl[0].url : "";
          params.commitmentUrl = commitmentUrl[0].url;
          if (
            params.businessLicenseValidity == "f" &&
            !params.businessLicenseValidityValue
          ) {
            this.$message.error("所有资质有效期非长期时必须填写");
            return;
          }
          if (
            params.copyrightValidity == "f" &&
            !params.copyrightValidityValue
          ) {
            this.$message.error("所有资质有效期非长期时必须填写");
            return;
          }
          if (
            params.commitmentValidity == "f" &&
            !params.commitmentValidityValue
          ) {
            this.$message.error("所有资质有效期非长期时必须填写");
            return;
          }

          params.businessLicenseValidity =
            params.businessLicenseValidity == "f"
              ? params.businessLicenseValidityValue
              : params.businessLicenseValidity;
          params.copyrightValidity =
            params.copyrightValidity == "f"
              ? params.copyrightValidityValue
              : params.copyrightValidity;
          params.commitmentValidity =
            params.commitmentValidity == "f"
              ? params.commitmentValidityValue
              : params.commitmentValidity;

          params.saleLeader = params.saleLeaderId.label;
          params.saleLeaderId = params.saleLeaderId.value;
          params.createrId = this.userId;

          if (this.editRecordId) {
            params.ksId = this.editRecordId;
            customerEdit(params)
              .then((res) => {
                const obj = {
                  path: "/account/create",
                  query: { id: this.editRecordId },
                };
                const objOpen = { path: "/account/customer" };
                this.$tab.closeOpenPage(obj);
                this.$tab.closePage(obj);
                this.$router.push(objOpen.path);
              })
              .catch((err) => {});
          } else {
            customerAdd(params)
              .then((res) => {
                const obj = { path: "/account/create" };
                const objOpen = { path: "/account/customer" };
                this.$tab.closeOpenPage(obj);
                this.$tab.closePage(obj);
                this.$router.push(objOpen.path);
              })
              .catch((err) => {});
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.entire-line {
  width: 100%;
  ::v-deep .el-form-item__content {
    width: 60%;
  }
}
// ::v-deep .el-form-item__label {
//   white-space: nowrap;
// }
::v-deep .el-tag {
  margin-right: 15px;
}
::v-deep .only-the-class .el-input__inner {
  padding: 0;
}
::v-deep .el-input-number__decrease {
  display: none;
}

::v-deep .el-input-number__increase {
  display: none;
}
</style>
