import React, { useState, useEffect } from 'react';
import { Card, message } from 'antd';
import router from 'umi/router';
import SelectCity from '@/components/SelectButton/CitySelect';
import XForm, { FieldTypes } from '@/components/XForm';
import Wangedit from '@/components/Wangedit/Wangedit';
import apis from '@/services/apis';
import request from '@/utils/request';
import SelectPolicyType from '@/components/SelectButton/SelectPolicyType';

/**
 *
 *
 * @param {*} props
 * @returns
 */
const Edit = props => {
  const policyId = props.location.query.policyId;
  const [policyData, setPolicyData] = useState({});
  if (policyId) {
    useEffect(() => {
      getPolicyData(policyId);
    }, []);

    // 查询列表
    const getPolicyData = policyId => {
      request({ ...apis.system.taPolicy, urlData: { id: policyId } }).then(data => {
        console.log(data);
        setPolicyData(data);
      });
    };
  }

  const cancelPage = () => {
    router.go('-1');
  };
  const fields = [
    {
      label: '城市',
      name: 'cityId',
      render: <SelectCity />,
      value: policyData.cityId,
      rules: [
        {
          required: true,
          message: '请选择城市',
        },
      ],
    },
    {
      label: '类型',
      name: 'policyTypeId',
      render: <SelectPolicyType />,
      value: policyData.policyTypeId,
      rules: [
        {
          required: true,
          message: '请选类型',
        },
      ],
    },
    {
      label: '购房须知标题',
      name: 'title',
      type: FieldTypes.Text,
      value: policyData.title,
      rules: [
        {
          required: true,
          message: '请输入购房须知标题',
        },
      ],
    },
    {
      label: '缩略标题',
      name: 'subtitle',
      type: FieldTypes.Text,
      value: policyData.subtitle,
      help: '7个字以内',
      rules: [
        {
          required: true,
          message: '请输入缩略标题',
        },
        {
          max: 8,
          message: '最大可输入7个字符',
        },
      ],
    },
    {
      label: '是否热点',
      name: 'isHot',
      type: FieldTypes.Switch,
      value: policyData.isHot === 1 ? true : false,
    },
    {
      label: '购房须知详情',
      name: 'body',
      render: <Wangedit />,
      value: policyData.body,
      rules: [
        {
          required: true,
          message: '请输入购房须知详情',
        },
      ],
    },

    {
      label: '状态',
      name: 'publishStatus',
      type: FieldTypes.Select,
      dict: [
        { label: '未发布', value: 0 },
        { label: '已发布', value: 1 },
      ],
      value: policyData.publishStatus != null ? policyData.publishStatus : 1,
    },
  ];

  const handleSubmit = val => {
    console.log('submit data --->', val);
    console.log(val.body, 'val.body');
    if (val.body == '<p><br></p>') {
      message.info('购房须知详情必填');
      return;
    }
    val.isHot = val.isHot ? 1 : 0;
    if (policyId) {
      val.policyId = policyId;
      request({ ...apis.system.updateTaPolicy, urlData: { id: policyId }, data: val })
        .then(data => {
          message.info('保存成功');
          cancelPage();
        })
        .catch(err => {
          message.info(err.msg || err.message);
        });
    } else {
      request({ ...apis.system.addTaPolicy, data: val })
        .then(data => {
          message.info('保存成功');
          cancelPage();
        })
        .catch(err => {
          message.info(err.msg || err.message);
        });
    }
  };

  return (
    <Card>
      <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
    </Card>
  );
};

export default Edit;
