Highways4Good/web/client/src/sections/fillion/components/infor/videoUpload.js

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Modal, Form, Button, Input } from 'antd';
import Uploads from "../../../../components/Upload/index"
import { putAddPropagata } from '../../actions/infor';
import { putEditPropagata } from '../../actions/infor';
import { getPropagata } from '../../actions/infor';


const VideoUpload = (props) => {
   const [counts, setCounts] = useState()//shuju

   //获取数据
   // useEffect(() => {
   //    const vedio = dispatch(getPropagata()).then((res) => {
   //       setCounts(res.payload.data)
   //       console.log(res.payload.data)
   //    })
   // }, [])

   const { dispatch, record } = props
   // console.log(record);
   const [success, setSuccess] = useState() //状态
   const [form] = Form.useForm();

   //弹窗
   const [isModalVisible, setIsModalVisible] = useState(false);
   // const [video1, videoAddress] = useState()
   const showModal = () => {
      setIsModalVisible(true);
   };

   // const idArr = record.map((item) => { item.id })
   // console.log(idArr);

   //新增
   const handleOkAdd = () => {
      form.validateFields().then((values) => {
         const videoAddress = values.video.map((item) => {
            return item.storageUrl.concat()
         })
         const videoname = values.videoname
         const data = { name: videoname, video: videoAddress }
         dispatch(putAddPropagata(data)).then((res) => {
            setSuccess(res.success)
            console.log(data);
         })
         setIsModalVisible(false);
      }
      );
   };
   //编辑
   const handleOkEdit = (record) => {
      console.log(record);
      console.log(record.id);
      form.validateFields().then((values) => {
         console.log(values);
         const videoAddress = values.video.map((item) => {
            return item.storageUrl.concat()
         })
         // const videoname = form.getFieldsValue('videoname')
         const videoname = values.username ? (!values.username) : record.name
         const id = record.id
         const video = record.video

         const data = { publicityId: id, name: videoname, video: videoAddress }
         dispatch(putEditPropagata(data)).then((res) => {
            setSuccess(res.success)
            console.log(data);
         })
      }
      );
      setIsModalVisible(false);
   };



   const handleCancel = () => {
      setIsModalVisible(false);
   };

   const onFinish = (values) => {
      console.log('Success:', values);
   };

   const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo);
   };


   return (
      <div >
         {
            props.type_ys ? <div><Button type='primary' onClick={showModal}>新增</Button>
               <Modal visible={isModalVisible} onOk={handleOkAdd} onCancel={handleCancel}>
                  <Form
                     form={form}
                     name="basic"
                     labelCol={{
                        span: 5,
                     }}
                     wrapperCol={{
                        span: 16,
                     }}
                     initialValues={{
                        remember: true,
                     }}
                     onFinish={onFinish}
                     onFinishFailed={onFinishFailed}
                     autoComplete="off"
                  >
                     <Form.Item
                        label="视频名称"
                        name="videoname"
                        rules={[
                           {
                              required: true,
                              message: '请输入视频名称!',
                              max: 50,
                           },
                        ]}
                     >
                        <Input
                           placeholder="请输入视频名称" />
                     </Form.Item>

                     <Form.Item
                        label="选择视频"
                        name="video"
                     >
                        <Uploads
                           maxFilesNum={10}
                           fileTypes={['mp4']}
                           maxFileSize={200}
                        />
                     </Form.Item>
                  </Form>
               </Modal>
            </div>
               :
               <div><Button type='link' onClick={showModal} style={{ Position: "absolute", left: "-50px", top: "32px" }}>编辑</Button>
                  <Modal visible={isModalVisible} onOk={() => handleOkEdit(record)} onCancel={handleCancel}>
                     <Form
                        form={form}
                        name="basic"
                        labelCol={{
                           span: 5,
                        }}
                        wrapperCol={{
                           span: 16,
                        }}
                        // initialValues={{
                        //    remember: true,
                        // }}
                        initialValues={true}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"

                     >
                        <Form.Item
                           label="视频名称"
                           name="username"
                           rules={[
                              {
                                 required: false,
                                 message: '没有做出任何修改!',
                                 max: 50,
                              },
                           ]}
                        >
                           <Input
                              placeholder="请输入视频名称"
                              defaultValue={record.name}
                           />

                        </Form.Item>
                        <Form.Item
                           label="选择视频"
                           name="video"
                        >
                           <Uploads
                              maxFilesNum={10}
                              fileTypes={['mp4']}
                              maxFileSize={200}
                           />
                        </Form.Item>
                     </Form>
                  </Modal>
               </div>
         }
      </div >
   )
}



function mapStateToProps (state) {
   const { depMessage } = state;
   const pakData = (dep) => {
      return dep.map((d) => {
         return {
            title: d.name,
            value: d.id,
            children: pakData(d.subordinate)
         }
      })
   }
   let depData = pakData(depMessage.data || [])
   return {
      loading: depMessage.isRequesting,
      depData,
   };
}
export default connect(mapStateToProps)(VideoUpload);